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.