6

Pra que serve o padding do container do Bootstrap se a row tem um margin negativo que cancela esse padding? Se eu quiser que toda a minha pagina tenha um padding pra que ela não fique grudada na borda como eu faço?

1 Resposta 1

6

Veja que: (independente se é Bootstrap 3 ou Bootstrap 4)

Container: O contêiner funciona dessa maneira para que as bordas do contêiner possam ter esse padding virtual de 15px ao redor do conteúdo, mas não exigir que a tag body tenha um padding de 15px. Esta foi uma alteração no RC1 do Bootstrap 3. Caso contrário, o corpo inteiro teria um padding de 15px, isso faria que mesmo as divs sem as classes de Bootstrap não ocupem 100% da largura do body

Rows: As rows têm margem negativa igual ao preenchimento dos contêineres para que também toquem a borda do contêiner, a margem negativa sobrepondo o padding do container. Isso permite que a row não seja empurrada para dentro pelo padding do contêiner.

Cols: as cols- também têm o padding de 15px, para que elas finalmente mantenham seu conteúdo de 15px longe da borda do container / browser / viewport, além de fornecer a medianiz de 15px + 15px entre as colunas. É assim, isso serve para criar uma consistência entre os espaçamentos das colunas, não importando se a coluna é a primeira ou a última. Agora, sempre vai haver 15px de espaçamento entre as colunas.

Agora vamos analisar essas imagens

O container tem dois propósitos:

  1. Fornecer as restrições de largura em larguras responsivas. Quando os tamanhos responsivos mudam, é o contêiner que muda. Linhas e colunas são todas baseadas em porcentagem, de modo que não precisam ser alteradas.

  2. Fornecer padding para que o conteúdo não toque na borda do navegador. Isso é 15px em cada lado, como visto em rosa na imagem.

inserir a descrição da imagem aqui

Você nunca deve usar um container dentro de outro!

As rows também têm um aspecto único de ter 15px de margem negativa em cada lado, como visto em azul na imagem abaixo. O div que compõe a row normalmente seria restrito dentro do preenchimento dos contêineres, tocando as bordas da área rosa, mas não além dela. As margens negativas de 15px empurram a linha para fora sobre o padding de 15px dos containers.

Nunca use uma linha fora de um contêiner, não vai funcionar.

inserir a descrição da imagem aqui

As colunas agora têm padding de 15px, visto em amarelo. Esse preenchimento significa que as colunas realmente tocam a borda da linha, que por sua vez toca a borda do contêiner, pois a linha tem a margem negativa e o contêiner tem o padding positivo. Mas, o preenchimento na coluna empurra qualquer coisa dentro da coluna para onde ela precisa estar, e também fornece um espaçamento entre elas de 30px.

Nunca use uma coluna fora de uma linha, não vai funcionar.

inserir a descrição da imagem aqui

Fonte: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Resumidamente:

As cols precisam de um padding para não deixar o conteúdo ir até as margens, e para manter um espaçamento entre um coluna e outra. A row precisa da margem para equalizar o padding do container não deixando o conteúdo encostar na janela do browser e para evitar que só a primeira e a última coluna tenham espaços a esquerda e a direita. Então com esse conjunto de padding e margins vc consegue uma consistência nos espaçamentos do grid e ainda pode ter divs que alcancem até a borda da janela do browser já que vc não precisa de padding no body

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 .