2

Estava eu aprendendo a utilizar a Navbar do Bootstrap, e veio-me uma duvida. Todos os exemplos que encontrei do uso da navbar, tem logo após o mesmo um container. É mais ou menos assim:

<div class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Lalala, também tem só o container, sem o -fluid -->
  </div>
</div>

Alguém saberia me explicar qual o por que de colocarmos? Eu consigo entender até o uso do class="container", mas o class="container-fluid" não. Não seria melhor só não colocar o container-fluid? Qual a vantagem de utilizarmos um container dentro de uma navbar?

1 Resposta 1

4

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Em português:

Rows devem ser colocadas dentro de um .container (width fixa) ou .container-fluid (largura total) para um alinhamento e valor de padding adequado.

Isso está mais relacionado como um guia de boas práticas. Se você analisar bem o código css do bootstrap, irá notar que existe todo um trabalho por trás do sistema de grid, onde possuímos a hierarquia container (ou container-fluid) > row > col-x-nn.

Obs.: Lembrando que não há necessidade de seguir esse conceito à risca, mas para o comportamento ideal, é o recomendado.

Para montar um sistema de grid corretamente, devemos usá-los nessa ordem visto que:

  • container irá criar uma margem
  • O elemento row possui uma margem negativa, para dar a sensação de um elemento full-width
  • E por fim, o elemento col-x-nn possui um padding, para evitar que fique tudo "esmagado"

Além disso, o container mantém o conteúdo centralizado.

Então por que usar o container em outras áreas?

Para manter a harmonia do site. Imagine que para cada seção do site você crie um section com uma margem específica. Ao fazer uma manutenção ou precisar ajustar essa margem, você teria que analisar todas as seções e ajustá-las individualmente. Com o container tudo fica padronizado e organizado no mesmo local.

Também serve como guia de boas práticas para outras áreas.

Breakpoints

Além disso tudo, o container possui definição de width baseado em seus breakpoints ou "pontos de quebra" (valor em que o layout altera baseado na largura da tela que está sendo usada. Celular, tablet, etc). Isso serve para que ele tenha o comportamento de nunca ficar muito pequeno (em telas grandes) e manter a proporção em todos os dispositivos, sejam eles celulares, tablets ou computadores.


Exemplo real

Faz um certo tempo que isso aconteceu comigo, então não sei se ainda acontece ou se já atualizou. Mas houve uma vez em que um elemento customizado que eu havia adicionado ao nav-bar era jogado para linha de baixo depois de ter o toggle do menu ativado. Esse problema foi resolvido quando voltei a usar o .container (havia removido por não achar necessário). Isso aconteceu pois ele criou o agrupamento adequado para os elementos.

2
  • 1
    +1 muito bem explicado \o Commented 17/05/2016 às 11:47
  • Perfeito, muito obrigado por disponibilizar seu tempo para fazer esta ótima explicação :) Commented 26/05/2016 às 5:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .