Bootstrap 5 - Grade: dispositivos medianos

Exemplo de grade de dispositivo de tamanho médio

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 >=576px >=768px >=992px >=1200px >=1400px

No capítulo anterior, mostramos um exemplo de grade que contém classes para dispositivos de pequeno porte. Usamos dois div (colunas) e lhes atribuímos uma divisão de 25% / 75%:

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

Mas no dispositivo de tamanho médio, o design de divisão de 50% / 50% pode ser melhor.

O dispositivo de tamanho médio é definido como largura da telaDe 768 pixels a 991 pixels.

Para dispositivos de tamanho médio, usaremos .col-md-* Classe:

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

Em dispositivos de pequeno porte, use a classe que contém -sm- da classe. Em dispositivos de tamanho médio, use a classe que contém -md- da classe.

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

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu logotipo é um panda gigante ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Em 1980, o WWF veio oficialmente à China, convidado pelo governo chinês para realizar o trabalho de proteção aos pandas gigantes e seus habitats ...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

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

Usando apenas Medium

Neste exemplo, especificamos apenas .col-md-6 Classe (sem .col-sm-*）。 Isso significa que dispositivos de tamanho médio, grande, extra grande e XXL dividirão 50% / 50% - porque essa classe se expande. No entanto, para dispositivos pequenos e ultra pequenos, elas empilharão verticalmente (largura de 100%):

Exemplo

<div class="row">
  <div class="col-md-6">
    <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu logotipo é um panda gigante ...</p>
  </div>
  <div class="col-md-6">
    <p>Em 1980, o WWF veio oficialmente à China, convidado pelo governo chinês para realizar o trabalho de proteção aos pandas gigantes e seus habitats ...</p>
  </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: apenas remova .col-md-* Remova os números e use apenas no elemento col .col-md Classe. Bootstrap identificará quantas colunas há e cada coluna obterá a mesma largura.

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

<!-- Duas colunas: em dispositivos de tamanho médio ou maior são 50% de largura -->
<div class="row">
  <div class="col-md">1 de 2</div>
  <div class="col-md">2 de 2</div>
</div>
<!-- Quatro colunas: em dispositivos de tamanho médio ou maior são 25% de largura -->
<div class="row">
  <div class="col-md">1 de 4</div>
  <div class="col-md">2 de 4</div>
  <div class="col-md">3 de 4</div>
  <div class="col-md">4 de 4</div>
</div>

Experimente pessoalmente

O próximo capítulo mostrará como adicionar diferentes porcentagens de divisão para dispositivos grandes.