twitter-bootstrap - filas - rejillas bootstrap 4

¿Práctica recomendada para una sola columna dentro de la fila en el sistema de cuadrícula bootstrap v3?

Question

He leído sobre el sistema de cuadrícula aquí: http://getbootstrap.com/css/#grid . Si bien la documentación no aborda directamente un escenario en el que hay una columna dentro de una fila, sí veo un ejemplo de esto aquí: http://getbootstrap.com/css/#grid-offsetting > tercera fila del código de ejemplo.

Actualmente, estoy aplicando la clase .col-xs-12 a la columna dentro de las etiquetas que lo contienen y funciona bien en todas las dimensiones de la ventana gráfica. Sin embargo, quiero asegurarme de que no haya una mejor manera de hacerlo.

¡Gracias!

Answer 1

Bueno, si solo tienes un elemento y quieres que use todo el ancho del contenedor (1170px), entonces probablemente no necesites el .row / .col-xs-12.

Vea este Example , revise el código fuente de la página en sí.

¿Observe cómo el contenido de arriba no usa filas / columnas?

  <div class="container">

  ...

  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>

En este caso, las filas / columnas no harían nada excepto agregar margen negativo (fila) y relleno (col).

Además, el ejemplo que está señalando utiliza la compensación, y no es de ancho completo, por lo que se requiere la fila / columna.

Answer 2

Creo que agregar una col * -12 será la mejor práctica. Hará que todas las filas en su cuadrícula actúen igual.

Ejemplo:

html

<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
            </div>
</div>                      
<div class="container">
            <div class="row" style="background-color:yellow;">
                direct inside a row
            </div>
</div>      
<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
                <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
            </div>
</div>

Como puede ver, el contenido NO está alineado con las otras filas cuando no agrega un col - * - 12 (debido al relleno faltante). Todas las filas de la misma harán que los cambios futuros sean más fáciles.

Deberá observar que la columna col * -12 difiere de la otra columna - porque no tiene una línea flotante, consulte: https://github.com/twbs/bootstrap/issues/10152

Answer 3

Sé que es un poco tarde, pero las respuestas anteriores no consideraron las clases de compensación de cuadrícula

Puedes centrar una columna con algo como esto:

<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>