Skip to main content
Commonmark migration
Fonte Link

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?###

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###

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.

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.

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.

Melhorar explicação e adicionar exemplo de um acontecimento.
Fonte Link
celsomtrindade
  • 8,2mil
  • 3
  • 37
  • 70

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 deles. Onde possuimosgrid, 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 o container irá criar uma margem:

  • 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 elemento row possui uma margem negativa (para dar a sensação de um elemento full-widthcontainer) e mantém o elemento col-x-nn, por sua vez, possui um padding, para evitar que fique tudo "esmagado"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 sectionsection 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 (se você analisar o código) possui definição de width não sóbaseado em seus %breakpoints como emou "pontos de quebra" px(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.

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 deles. Onde possuimos a hierarquia container > row > col-x-nn.

Para montar um sistema de grid corretamente, devemos usá-los nessa ordem visto que o container irá criar uma margem, o elemento row possui uma margem negativa (para dar a sensação de um elemento full-width) e o elemento col-x-nn, por sua vez, possui um padding, para evitar que fique tudo "esmagado".

###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 (se você analisar o código) possui definição de width não só em % como em px. 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.

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.

Fonte Link
celsomtrindade
  • 8,2mil
  • 3
  • 37
  • 70

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 deles. Onde possuimos a hierarquia container > row > col-x-nn.

Para montar um sistema de grid corretamente, devemos usá-los nessa ordem visto que o container irá criar uma margem, o elemento row possui uma margem negativa (para dar a sensação de um elemento full-width) e o elemento col-x-nn, por sua vez, possui um padding, para evitar que fique tudo "esmagado".

###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 (se você analisar o código) possui definição de width não só em % como em px. 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.