A barra de navegação é um componente de aplicação importante. Ele fornece ao usuário os nomes de diferentes seções de aplicativos incorporadas com seus links. O usuário será direcionado para essa parte clicando nesses links de seção. Bootstrap oferece muitas classes para criar a barra de navegação. Mais especificamente, algumas classes de bootstrap ajudam a ajustar a posição do Navbar.

Este artigo explicará como fazer com que o marinho fixo superior não estivesse fora do contêiner.

Como fazer um marinho fixo superior?

O "TOP fixo”A classe é utilizada para consertar o marinho na parte superior da viewport. Tem um CSS predefinido “posição”Propriedade com o valor“fixo”Com algumas outras propriedades.

Exemplo

Vamos implementar o “TOP fixo”Class para o Navbar e veja seu efeito:

• Primeiro, adicione um “
• Inclua o logotipo usando o “Brand-marinho" aula.
• Então, adicione o “”Elemento para criar um botão. Isso será exibido na tela quando a tela for reduzida significa que todos os itens serão recolhidos, que são aplicados usando o “Data-Toggle”Atributo com o valor“colapso”. Ao clicar no botão, os itens da barra de navegação serão exibidos como um menu.
• Especifique o "”Elemento com o“colapso" e "Navbar-colapso" Aulas.
• Adicione os itens da barra de navegação na forma de uma lista não ordenada.
• Então, faça a barra de pesquisa usando o “" elemento.

Html

Até agora, criamos uma barra de navegação. Agora, vamos adicionar algum conteúdo à página da web:

Bem -vindo ao Linuxhint

Linuxhint fornece os melhores artigos e vídeos de qualidade.

Veja mais

Você pode observar a partir do GIF abaixo, a posição da barra de navegação está fixada no topo da viewport:

Do GIF abaixo, pode -se observar que, ao aumentar ou diminuir o tamanho da tela, a barra de navegação está se estendendo de acordo:

A seção abaixo demonstrará como fazer com que a barra fixa superior permanecerá no recipiente e não se esticará com a ajuda de exemplos práticos.

Como fazer com que o marinho fixo superior não estique fora do contêiner?

Bootstrap's “recipiente”A classe oferece um contêiner de largura fixa responsiva. Esta aula ajuda a barra a ficar em um recipiente e evita o alongamento.

Exemplo

Atribua o “recipiente”Classe para a“