Bootstrap 5 Grade: Dispositivos Grandes

Recomendação de curso:

Exemplo de grade de dispositivo grande XSmall Small Medium Large Extra Large
XXL Prefixo da classe .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Largura da tela <576px >=768px >=992px >=1200px >=1400px

No capítulo anterior, mostramos um exemplo de grade que contém classes para dispositivos de pequeno e médio porte. Usamos dois divs (colunas) e dividimos 25%/75% no dispositivo pequeno, 50%/50% no dispositivo médio:

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

Mas no dispositivo grande, um design de divisão de 33% / 66% pode ser melhor.

O dispositivo grande é definido como largura da telaDe 992 pixels a 1199 pixels.

Para dispositivos grandes, usaremos .col-lg-* Classe:

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

No dispositivo pequeno, use classes que contêm -sm- da classe. No dispositivo médio, use classes que contêm -md- da classe. No dispositivo grande, use classes que contêm -lg- da classe.

O exemplo a seguir causará divisão de 25%/75% em dispositivos de pequeno porte, 50%/50% em dispositivos de tamanho médio, e 33%/66% em dispositivos grandes, xlarge e xxlarge. Em dispositivos extra pequenos, ele se empilhará automaticamente (100%):

Exemplo

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

Experimente pessoalmente

Anotação:Certifique-se de que a soma seja igual ou menor que 12 (não é necessário usar todas as 12 colunas disponíveis):

Apenas Large

No exemplo a seguir, especificamos apenas .col-lg-6 classe (sem .col-md-* e/ou .col-sm-*）。 Isso significa que dispositivos large, xlarge e xxlarge dividirão 50%/50%. No entanto, para dispositivos medium, small e extra small, eles empilharão verticalmente (largura de 100%):

Exemplo

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

Experimente pessoalmente

Layout de coluna automático

No Bootstrap 5, há um método simples para criar colunas isentas de dispositivos para todos: basta partir de .col-lg-* Remova os números e use apenas no elemento col .col-lg Classe. Bootstrap identificará quantas colunas há e cada coluna terá a mesma largura.

Se o tamanho da telaMenos de 992px, as colunas serão empilhadas horizontalmente:

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

Experimente pessoalmente