Cuadrícula: dispositivos ultragrandes Bootstrap 5

Ejemplo de rejilla de dispositivo extra grande

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

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

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

Pero en dispositivos xlarge, un diseño de división de 20% / 80% podría ser mejor.

Los dispositivos extra grandes se definen como anchura de pantalla de 1200 píxeles o más.

Para dispositivos xlarge, utilizaremos .col-xl-* Clase:

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

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

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <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 col-xl-10">
      <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 siempre sea 12.

Utilice solo XLarge

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

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-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-xl-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 una manera sencilla de crear columnas isómetros para todos los dispositivos: simplemente desde .col-xl-* Elimine los números y úselos solo en el elemento col .col-xl Clase. Bootstrap reconocerá cuántas columnas hay y cada columna obtendrá el mismo ancho.

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

/* Dos columnas: en dispositivos de gran tamaño y superior son del 50% de ancho */
<div class="row">
  <div class="col-xl">1 de 2</div>
  <div class="col-xl">2 de 2</div>
</div>
/* Cuatro columnas: en dispositivos de gran tamaño y superior son del 25% de ancho */
<div class="row">
  <div class="col-xl">1 de 4</div>
  <div class="col-xl">2 de 4</div>
  <div class="col-xl">3 de 4</div>
  <div class="col-xl">4 de 4</div>
</div>

Prueba personalmente