Cuadrícula: dispositivos grandes Bootstrap 5

Recomendaciones de curso:

Ejemplo de cuadrícula para dispositivos grandes 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 >=768px >=992px >=1200px >=1400px

En el capítulo anterior, mostramos un ejemplo de cuadrícula que contiene clases para dispositivos pequeños y medianos. Utilizamos dos div (columnas) y realizamos una división del 25%/75% en dispositivos pequeños y del 50%/50% en dispositivos medianos:

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

Pero en dispositivos grandes, un diseño de división de 33% / 66% podría ser mejor.

Los dispositivos grandes se definen como el ancho de pantallaDesde 992 píxeles hasta 1199 píxeles.

Para dispositivos grandes, utilizaremos .col-lg-* Clase:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

En dispositivos pequeños, utilice las clases que contienen -sm- de la clase. En dispositivos medianos, utilice las clases que contienen -md- de la clase. En dispositivos grandes, utilice las clases que contienen -lg- de la clase.

El siguiente ejemplo provocará la división del 25%/75% en dispositivos pequeños, del 50%/50% en dispositivos medianos, y del 33%/66% en dispositivos grandes, xlarge y xxlarge. En dispositivos ultrapequeños, se ajustará automáticamente (100%):

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <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 col-md-6 col-lg-8">
      <p>En 1980, WWF llegó formalmente 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 personalmente

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

Únicamente Large

En el siguiente ejemplo, solo especificamos .col-lg-6 clase (sin .col-md-* y/o .col-sm-*）。 Esto significa que los dispositivos large, xlarge y xxlarge se dividirán 50/50%. Pero, para dispositivos medianos, pequeños y ultrapequeños, se apilarán verticalmente (ancho del 100%):

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <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-lg-6">
      <p>En 1980, WWF llegó formalmente 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 personalmente

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-lg-* Elimine los números y úselos solo en el elemento col .col-lg Clase. Bootstrap reconocerá cuántas columnas hay y cada columna obtendrá el mismo ancho.

Si el tamaño de la pantallaMenos de 992px, las columnas se apilarán horizontalmente:

<!-- Dos columnas: en dispositivos grandes y superiores son del 50% de ancho -->
<div class="row">
  <div class="col-lg">1 de 2</div>
  <div class="col-lg">2 de 2</div>
</div>
<!-- Cuatro columnas: en dispositivos grandes y superiores son del 25% de ancho -->
<div class="row">
  <div class="col-lg">1 de 4</div>
  <div class="col-lg">2 de 4</div>
  <div class="col-lg">3 de 4</div>
  <div class="col-lg">4 de 4</div>
</div>

Prueba personalmente