Rejilla de Bootstrap 5: De apilado a horizontal

Ejemplo de rejilla: Alinear horizontalmente

Vamos a crear un sistema de rejilla básico que comience apilado en dispositivos ultrpequeños y luego se alinee horizontalmente en dispositivos más grandes.

El siguiente ejemplo muestra un diseño de dos columnas simple de "alineación horizontal", lo que significa que generará un desglose de 50%/50% en todas las pantallas, excepto en pantallas ultrpequeñas, que se apilarán automáticamente (100%):

Ejemplo: Alinear horizontalmente

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Columna 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Columna 2 ...</p>
    </div>
  </div>
</div>

Pruebe usted mismo

Consejo:.col-sm-* El número en la clase indica cuántas columnas debe cruzar el div (un total de 12 columnas). Por lo tanto,.col-sm-1 Cruza 1 columna.col-sm-4 Cruza 4 columnas.col-sm-6 Cruza 6 columnas, etc.

Nota:Asegúrese de que la suma sea igual o menor que 12 (no es necesario usar todas las 12 columnas disponibles):

Consejo:Al quitar .container-fluid clase a .containerPuede cambiar cualquier Ancho completo Diseño se convierte en Ancho fijo Diseño sensible:

Ejemplo: Contenedor sensible

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Columna 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Columna 2 ...</p>
    </div>
  </div>
</div>

Pruebe usted mismo

Columnas de diseño automático

En Bootstrap 5, hay una manera sencilla de crear columnas de ancho igual para todos los dispositivos: simplemente quite .col-size-* Elimine los números y úselos solo en el elemento col .col-size Clase. Bootstrap identificará cuántas columnas hay y cada columna obtendrá el mismo ancho. Las clases de tamaño (sm, md, etc.) determinan cuándo deben ser responsivas:

<!-- Dos columnas: un ancho del 50% en todas las pantallas, excepto en dispositivos de muy pequeño tamaño (ancho del 100%) -->
<div class="row">
  <div class="col-sm">1 de 2</div>
  <div class="col-sm">2 de 2</div>
</div>
<!-- Cuatro columnas: un ancho del 25% en todas las pantallas, excepto en dispositivos de muy pequeño tamaño (ancho del 100%) -->
<div class="row">
  <div class="col-sm">1 de 4</div>
  <div class="col-sm">2 de 4</div>
  <div class="col-sm">3 de 4</div>
  <div class="col-sm">4 de 4</div>
</div>

Pruebe usted mismo