Bootstrap 4 Grid Apilado a horizontal
Ejemplo de cuadrícula de Bootstrap 4: apilado en horizontal
Crearemos un sistema de cuadrícula básico que comienza apilado en dispositivos extra pequeños, antes de volverse horizontal en dispositivos más grandes.
El siguiente ejemplo muestra un diseño simple de dos columnas "apilado a horizontal", lo que significa que dará como resultado una división del 50 %/50 % en todas las pantallas, excepto en las pantallas extra pequeñas, que se apilarán automáticamente (100 %):
Ejemplo: apilado en horizontal
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Sugerencia: los números en las .col-sm-*clases indican cuántas columnas debe abarcar el div (de 12). Por lo tanto, .col-sm-1abarca 1 columna, .col-sm-4abarca 4 columnas,
.col-sm-6abarca 6 columnas, etc.
Nota:
asegúrese de que la suma sume 12 o menos (no es necesario que use las 12 columnas disponibles):
Sugerencia: puede convertir cualquier diseño de ancho fijo en un diseño de ancho completo cambiando la .containerclase a .container-fluid:
Ejemplo: Contenedor de fluido
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Columnas de diseño automático
En Bootstrap 4, hay una manera fácil de crear columnas de igual ancho para todos los dispositivos: simplemente elimine el número y use la clase solo en un número específico de
elementos col . Bootstrap reconocerá cuántas columnas hay y cada columna tendrá el mismo ancho. Las clases de tamaño determinan cuándo deben responder las columnas:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>