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
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:
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.
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.
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.
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.
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