Cuadrícula de Bootstrap 5: XXL

Ejemplo de cuadrícula de dispositivo XXL

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

Los dispositivos XXL se definen como aquellos que tienen 1400 píxeles y másancho de la pantalla.

La siguiente ejemplo generará una división del 50/50 en dispositivos medianos, grandes y ultragrandes, y una división del 25/75 en dispositivos XXL. En dispositivos pequeños y ultrpequeños, se apilará automáticamente (100%):

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <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-md-6 col-xxl-9">
      <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 personalmente

Nota:Asegúrese de que la suma siempre sea 12.

Utilice solo XXL

En el siguiente ejemplo, solo especificamos .col-xxl-6 clases (sin .col-md-* y / o .col-sm-*）。 Esto significa que los dispositivos xxlarge se dividirán 50/50%. Sin embargo, para dispositivos ultragrandes, grandes, medianos, pequeños y extrapequeños, se apilarán verticalmente (100% de ancho):

Ejemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-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-xxl-6">
      <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 personalmente

Columnas de diseño automático

En Bootstrap 5, hay un método simple para crear columnas iguales para todos los dispositivos: simplemente desde .col-xxl-* Elimine los números y úselos solo en el elemento col .col-xxl La clase. Bootstrap identificará cuántas columnas hay y cada columna obtendrá el mismo ancho.

Si el tamaño de la pantallaMenos de 1400px, 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-xxl">1 de 2</div>
  <div class="col-xxl">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-xxl">1 de 4</div>
  <div class="col-xxl">2 de 4</div>
  <div class="col-xxl">3 de 4</div>
  <div class="col-xxl">4 de 4</div>
</div>

Prueba personalmente