Bootstrap 3 - Por que a classe de linha é mais larga do que seu contêiner?

116

Acabei de começar a usar o Bootstrap 3. Estou tendo dificuldade em entender como a classe de linha funciona. Existe uma maneira de evitar o padding-lefte padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3 Petran
fonte
@Adrift isso ainda é verdade? Não tenho certeza se você quer dizer que eles não funcionam corretamente, porque os tenho usado e parecem funcionar como deveriam.
Cereal
1
@Cereal: Não mais. Isso foi adicionado na v3.0.2
adrift
3
porque a linha de bootstrap tem margens esquerda e direita de -15 pixels.
Provavelmente não é o seu problema, mas para qualquer pessoa com o mesmo tipo de problema: certifique-se de que você tenha apenas um atributo de classe em seus divs. Eu acidentalmente os dobrei e tive o mesmo problema.
The One True Colter

Respostas:

151

Em todos os sistemas de grade, existem calhas entre cada coluna. O sistema do Bootstrap define um preenchimento de 15 pixels à esquerda e à direita de cada coluna para criar esta calha.

A questão é que a primeira coluna não deve ter meia sarjeta à esquerda e a última não deve ter meia sarjeta à direita. Em vez de usar algum tipo de classe .firstou .lastnessas colunas como alguns sistemas de grade fazem, eles definem a .rowclasse para ter margens negativas que correspondam ao preenchimento das colunas. Isso "puxa" as calhas da primeira e da última colunas, ao mesmo tempo que as torna mais largas.

o .row div nunca deve ser usado para conter nada além de colunas de grade. Se for, você verá o conteúdo deslocado em relação a quaisquer colunas, como fica evidente em seu violino.

ATUALIZAR:

Você modificou sua pergunta depois que eu respondi, então aqui está a resposta para a pergunta que você está fazendo agora: Adicione a .containerclasse à primeira <div>. Veja o exemplo de trabalho .

Sean Ryan
fonte
2
As colunas da grade são separadas por preenchimento, não por margem (em BS3)
à deriva
3
Ótimo! Isso explica todo o conteúdo transbordando.
Rutwick Gangurde
27

Com o bootstrap 3.3.7, esse problema é resolvido envolvendo o .row com .container-fluid.

dbarma
fonte
Isso funcionou para mim, embora inicialmente eu tenha pensado que não, isso é porque eu tinha o console da web do desenvolvedor aberto, o que reduz a largura, mas aparentemente também bagunça tudo. O uso .container-fluidtambém foi sugerido aqui: stackoverflow.com/a/23616447/5272567
Matthias
funciona, também, quando o div de envolvimento está na posição absolute. obrigado pela dica
InsOp
se eu pudesse votar a favor desta resposta várias vezes ... :)
rony36
Mesma correção para Bootstrap 4.
Rob L
19

Veja minha resposta abaixo para postagem semelhante.

Por que o bootstrap .row tem uma margem esquerda padrão de -30px?

Basicamente, você usa "clearfix" em vez de "row". Ele faz exatamente o mesmo que "linha" excluindo a margem negativa.

Kyle
fonte
2
Essas classes fazem duas coisas diferentes, embora possam parecer visualmente fazer isso. Clear não é tão flexível em situações responsivas e com sistemas de grade o comportamento de .row é correto.
Todd Baur
Isso resolve o excesso de conteúdo fora da embalagem.
Bhojendra Rauniyar,
Mas a melhor maneira é envolver a linha com o contêiner.
Bhojendra Rauniyar,
MELHOR ASWER! ACIMA!
Anderson Bressane
18

Usei a classe row dentro da classe container e ainda tinha alguns problemas. Quando eu acrescentei margin-left: auto; margin-right: auto;à .rowclasse, funcionou bem.

Jeffrey
fonte
8
Isso funcionou como um encanto! Adicionar a classe 'mx-auto' no bootstrap 4 corrigiu o problema de estouro para mim.
Michelle M.
3

@Michelle M. deve receber crédito total por esta resposta.
Ela disse em um dos comentários:

Adicionar a classe 'mx-auto' no bootstrap 4 corrigiu o problema de estouro para mim.

Você precisaria atualizar seu primeiro divElemento da seguinte maneira:

<div class="row mx-auto" style="background:#000000">

Não há necessidade de fazer isso para todas as Nested-Rows (se você as tiver).
Basta adicionar mx-autoao mais externo row(ou linhas) para evitar a barra de rolagem vertical.
Não substitua o comportamento de todas as Linhas de Bootstrap adicionando uma classe de "linha" para substituir as Margens.

MikeTeeVee
fonte
1

Para qualquer futuro desenvolvedor que depure este problema:

Bootstrap define o preenchimento para colunas de linha, portanto, nenhum conteúdo de uma linha deve aparecer fora do contêiner. Se você está passando por isso e está usando o sistema de grade do bootstrap corretamente usando as classes col -..., é provável que você tenha CSS adicional em algum lugar para redefinir o preenchimento das colunas.

JSideris
fonte
Ou você tem uma versão antiga do Bootstrap. Por exemplo, 3.0.0 distribuído com VS2015. Consulte github.com/twbs/bootstrap/issues/8959
Adventure