Bootstrap 4 cuadrícula pequeña
Ejemplo de cuadrícula pequeña
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se dividan en un 25 %/75 % para dispositivos pequeños.
Los dispositivos pequeños se definen como aquellos que tienen un ancho de pantalla de 576 píxeles a 767 píxeles .
Para dispositivos pequeños usaremos las .col-sm-*clases.
Agregaremos las siguientes clases a nuestras dos columnas:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Ahora Bootstrap va a decir "en el tamaño pequeño, busque clases con -sm- en ellas y utilícelas".
El siguiente ejemplo dará como resultado una división del 25 %/75 % en dispositivos pequeños (y medianos, grandes y extragrandes). En dispositivos extrapequeños, se acumulará automáticamente (100%):
Ejemplo
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Nota: asegúrese de que la suma sume 12 o menos (no es necesario que use las 12 columnas disponibles):
Para una división del 33,3 %/66,6 %, usaría .col-sm-4y .col-sm-8(y para una división del 50 %/50 %, usaría .col-sm-6y .col-sm-6):
Ejemplo
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<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>
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 .col-sm-*y use la .col-smclase solo en un número específico de
elementos col . Bootstrap reconocerá cuántas columnas hay y cada columna tendrá el mismo ancho.
Si el tamaño de la pantalla es inferior a 576 px , las columnas se apilarán horizontalmente:
<!-- 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>
El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos medianos.