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

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