Cuadrícula: dispositivos pequeños Bootstrap 5

Ejemplo de cuadrícula de dispositivo pequeño

XSmall Small Medium Large Extra Large XXL
Prefijo de clase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Ancho de pantalla <576px >=576px >=768px >=992px >=1200px >=1400px

Supongamos que tenemos un diseño simple con dos columnas. Para dispositivos pequeños, queremos dividir las columnas en un 25% / 75%.

Los dispositivos pequeños se definen como el ancho de la pantallaDesde 576 píxeles hasta 767 píxeles。

Para dispositivos pequeños, usaremos .col-sm-* clase.

Añadiremos las siguientes clases a dos columnas:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

El siguiente ejemplo generará una división del 25% / 75% en dispositivos pequeños (así como medianos, grandes, extragrandes y gigantes). En dispositivos muy pequeños, se apilará automáticamente (100%):

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>

Prueba por tu cuenta

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

Para una división del 33.3% / 66.6%, debe usar .col-sm-4 y .col-sm-8Para una división del 50% / 50%, debe usar .col-sm-6 y .col-sm-6)：

Ejemplo

33.3/66.6% split:
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>
<!-- División de 50/50: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>La Fundación Mundial para la Naturaleza (WWF), fundada el 29 de abril de 1961, su logotipo es un panda gigante...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>En 1980, WWF llegó oficialmente a China, invitado por el gobierno chino para llevar a cabo el trabajo de protección del panda gigante y su hábitat...</p>
    </div>
  </div>
</div>

Prueba por tu cuenta

columnas de diseño automático

En Bootstrap 5, hay un método simple para crear columnas de ancho igual para todos los dispositivos: simplemente desde .col-sm-* eliminar los números y solo elementos colse utiliza .col-sm Bootstrap identificará cuántas columnas hay y cada columna obtendrá el mismo ancho.

Si el tamaño de la pantallaMenos de 576pxLas columnas se apilarán horizontalmente:

<!-- Dos columnas: un ancho del 50% en todas las pantallas, excepto en dispositivos ultrapequeños (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 ultrapequeños (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>

Prueba por tu cuenta

El próximo capítulo mostrará cómo agregar diferentes porcentajes de división para dispositivos de tamaño mediano.