Bootstrap 3: ¿por qué la clase de fila es más ancha que su contenedor?

116

Acabo de comenzar a usar Bootstrap 3. Estoy teniendo dificultades para entender cómo funciona la clase de fila. ¿Hay alguna forma de evitar el padding-lefty 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
fuente

@Adrift, ¿esto sigue siendo cierto? No estoy seguro si quiere decir que no funcionan correctamente, porque los he estado usando y parecen funcionar como deberían.

— Cereal

1

@Cereal: Ya no. Esto se agregó en v3.0.2

— deriva el

3

porque la fila de arranque tiene márgenes izquierdo y derecho de -15px.

Probablemente no sea su problema, pero para cualquier otra persona que tenga el mismo tipo de problema: asegúrese de tener solo un atributo de clase en sus divs. Los dupliqué accidentalmente y obtuve el mismo problema.

— The One True Colter

151

En todos los sistemas de cuadrícula, hay canaletas entre cada columna. El sistema de Bootstrap establece un relleno de 15px tanto a la izquierda como a la derecha de cada columna para crear este canal.

El problema es que la primera columna no debería tener media canaleta a la izquierda y la última no debería tener media canaleta a la derecha. En lugar de utilizar algún tipo de .firsto .lastclase sobre esas columnas como algunos sistemas de red hacen, en lugar de establecer la .rowclase de los márgenes son negativos que coinciden con el relleno de las columnas. Esto "tira" de las canaletas de la primera y última columna, mientras que al mismo tiempo la hace más ancha.

El .rowdiv nunca debería usarse para contener nada más que columnas de cuadrícula. Si es así, verá el contenido cambiado en relación con cualquier columna, como es evidente en su violín.

ACTUALIZAR:

Modificó su pregunta después de que respondí, así que aquí está la respuesta a la pregunta que está haciendo ahora: Agregue la .containerclase a la primera <div>. Ver ejemplo de trabajo .

— Sean Ryan
fuente

2

Las columnas de la cuadrícula están separadas por relleno, no por margen (en BS3)

— deriva

3

¡Excelente! Eso explica todo el contenido desbordante.

— Rutwick Gangurde

27

Con bootstrap 3.3.7 este problema se resuelve envolviendo el .row con .container-fluid.

— dbarma
fuente

esto funcionó para mí, aunque inicialmente pensé que no, eso se debe a que tenía abierta la consola web del desarrollador, lo que reduce el ancho, pero aparentemente también lo estropea. Utilizando .container-fluidtambién fue sugerido aquí: stackoverflow.com/a/23616447/5272567

— Matthias

también funciona cuando el div de envoltura está en posición absolute. gracias por la pista

— InsOp

si pudiera votar a favor esta respuesta varias veces ... :)

— rony36

La misma solución para Bootstrap 4.

— Rob L

19

Vea mi respuesta a continuación a una publicación similar.

¿Por qué bootstrap .row tiene un margen izquierdo predeterminado de -30px?

Básicamente, usa "clearfix" en lugar de "fila". Hace exactamente lo mismo que "fila" excluyendo el margen negativo.

— Kyle
fuente

2

Esas clases hacen dos cosas diferentes, aunque puede parecer que lo hacen visualmente. Clear no es tan flexible en situaciones de respuesta y con sistemas de cuadrícula el comportamiento de .row es correcto.

— Todd Baur

Esto resuelve el contenido desbordado fuera de la envoltura.

— Bhojendra Rauniyar

Pero la mejor manera es envolver la fila con el contenedor.

— Bhojendra Rauniyar

MEJOR ASWER! ¡ARRIBA!

— Anderson Bressane

18

Usé la clase de fila dentro de la clase de contenedor y todavía tenía algún problema. Cuando agregué margin-left: auto; margin-right: auto;a la .rowclase funcionó bien.

— Jeffrey
fuente

8

¡Funcionó como por arte de magia! Agregar la clase 'mx-auto' en bootstrap 4 solucionó el problema de desbordamiento para mí.

— Michelle M.

3

@Michelle M. debería recibir todo el crédito por esta respuesta.
Ella dijo en uno de los comentarios:

Agregar la clase 'mx-auto' en bootstrap 4 solucionó el problema de desbordamiento para mí.

Necesitaría actualizar su primer divelemento así:

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

No es necesario hacer esto para todas las filas anidadas (si las tiene).
Simplemente agregue mx-autoa la más externa row(o Filas) para evitar la barra de desplazamiento vertical.
No anule el comportamiento de todas las filas de Bootstrap agregando una clase "fila" para reemplazar los márgenes.

— MikeTeeVee
fuente

1

Para futuros desarrolladores que depuren este problema:

Bootstrap establece el relleno para las columnas de la fila, por lo que ninguno de los contenidos de una fila debe aparecer fuera del contenedor. Si está experimentando esto y está usando el sistema de cuadrícula de bootstrap correctamente usando las clases col -..., es probable que tenga CSS adicional en algún lugar restableciendo el relleno en las columnas.

— JSideris
fuente

O tiene una versión antigua de Bootstrap. Por ejemplo, 3.0.0 distribuido con VS2015. Ver github.com/twbs/bootstrap/issues/8959

— Adventure