Grade do Bootstrap 5: XXL

Exemplo de grade de dispositivo XXL

XSmall Small Medium Large Extra Large XXL
prefixo de classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
largura da tela <576px >=576px >=768px >=992px >=1200px >=1400px

O dispositivo XXL é definido como tendo 1400 pixels ou maislargura da tela.

A seguinte exemplo gerará uma divisão de 50/50 em dispositivos de tamanho médio, grande e ultra-grande, e uma divisão de 25/75 no dispositivo XXL. Em dispositivos pequenos e ultra-pequenos, ele se empilhará automaticamente (100%):

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu símbolo é um gigante panda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>Em 1980, a WWF chegou oficialmente à China, convidada pelo governo chinês para desenvolver o trabalho de proteção ao gigante panda e seu habitat ...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Anotação:Certifique-se de que a soma sempre seja 12.

apenas usando XXL

No exemplo a seguir, especificamos apenas .col-xxl-6 classe (sem .col-md-* e / ou .col-sm-*）。 Isso significa que os dispositivos xxlarge serão divididos 50/50%. No entanto, para dispositivos ultra-grandes, grandes, médios, pequenos e ultra-pequenos, eles serão empilhados verticalmente (largura 100%):

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu símbolo é um gigante panda ...</p>
    </div>
    <div class="col-xxl-6">
      <p>Em 1980, a WWF chegou oficialmente à China, convidada pelo governo chinês para desenvolver o trabalho de proteção ao gigante panda e seu habitat ...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Colunas de layout automático

No Bootstrap 5, há uma maneira simples de criar colunas isômetricas para todos os dispositivos: basta partir de .col-xxl-* Remova os números e use apenas no elemento col .col-xxl Classe. Bootstrap identificará quantas colunas há e cada coluna obterá a mesma largura.

Se o tamanho da telaMenor que 1400px, as colunas serão empilhadas horizontalmente:

<!-- Duas colunas: em dispositivos acima de extra-grande, a largura é 50% -->
<div class="row">
  <div class="col-xxl">1 de 2</div>
  <div class="col-xxl">2 de 2</div>
</div>
<!-- Quatro colunas: em dispositivos acima de extra-grande, a largura é 25% -->
<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>

Experimente pessoalmente