twitter bootstrap - rejillas - Bootstrap 3-¿Por qué la clase de filas es más ancha que su contenedor?
sistema de rejillas bootstrap 4 (5)
Acabo de empezar a utilizar bootstrap 3. Me resulta difícil entender cómo funciona la clase row. ¿Hay alguna manera de evitar el relleno-izquierda y relleno-derecha?
<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>
Con bootstrap 3.3.7 este problema se resuelve envolviendo el .row con .container-fluid.
En todos los sistemas de grillas, 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 esta canaleta.
El problema es que la primera columna no debe tener media canaleta a la izquierda, y la última no debe tener media canaleta a la derecha. En lugar de utilizar algún tipo de clase .last o .last en esas columnas como lo hacen algunos sistemas grid, en su lugar configuran la clase .row para que tenga márgenes negativos que coincidan con el relleno de las columnas. Esto "tira" de las canaletas de la primera y la última columna, y al mismo tiempo la hace más ancha.
El div .row nunca debería usarse para contener nada más que columnas de cuadrícula. Si es así, verá el contenido desplazado en relación con cualquier columna, como es evidente en su violín.
ACTUALIZAR:
Modificó su pregunta después de responder, así que aquí está la respuesta a la pregunta que ahora está haciendo: Agregue la clase .container al primer <div> . Ver ejemplo de trabajo .
Para futuros desarrolladores que solucionen este problema:
Bootstrap establece el relleno para las columnas de fila, por lo que ninguno de los contenidos de una fila debe aparecer fuera del contenedor. Si estás experimentando esto y estás usando el sistema de grilla de bootstrap correctamente usando las clases col -..., es probable que tengas CSS adicional en alguna parte reiniciando el relleno en las columnas.
Utilicé la clase de fila dentro de la clase de contenedor y aún tuve algún problema. Cuando agregué margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; para la clase .row funcionó bien.
Ver mi respuesta a continuación a una publicación similar.
¿Por qué el archivo bootstrap .row tiene un margen predeterminado a la izquierda de -30px?
Básicamente utilizas "clearfix" en lugar de "row". Hace exactamente lo mismo que "fila" excluyendo el margen negativo.