Bootstrap 5 grid: extra stora enheter

Storleken på en stor enhet nätverksexempel

XSmall Small Medium Large Extra Large XXL
Klasspräffix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Skärmens bredd <576px >=576px >=768px >=992px >=1200px >=1400px

I föregående kapitel visade vi ett rutnätsexempel som innehåller klasser för små, mellanstora och stora enheter. Vi använde två div (kolumner) och gjorde 25%/75% delning på små enheter, 50%/50% delning på mellanstora enheter och 33%/66% delning på stora enheter:

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

Men på xlarge-enheter kan en design med 20% / 80% delning vara bättre.

Storleken på en stor enhet definieras som skärmens bredd 1200 pixlar och över.

För xlarge-enheter kommer vi att använda .col-xl-* Klass:

<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>

Följande exempel kommer att leda till att 25%/75% delas upp på små enheter, 50%/50% delas upp på mellanstora enheter, 33%/66% delas upp på stora enheter samt 20%/80% delas upp på xlarge och xxlarge enheter. På mycket små enheter kommer det att staplas automatiskt (100%):

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har en panda som logotyp...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skyddsuppgifter för panda och dess habitat...</p>
    </div>
  </div>
</div>

Prova själv

Observera:Se till att summan alltid är 12.

Använd endast XLarge

I följande exempel specificerar vi endast .col-xl-6 klasser (ingen .col-lg-*,.col-md-* och/eller .col-sm-*）。Detta innebär att xlarge- och xxlarge-enheter kommer att delas 50/50%. Men för stora, medelstora, små och extrasmå enheter kommer de att ligga vertikalt (100% bredd):

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har en panda som logotyp...</p>
    </div>
    <div class="col-xl-6">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skyddsuppgifter för panda och dess habitat...</p>
    </div>
  </div>
</div>

Prova själv

Automatisk layout av kolumner

I Bootstrap 5 finns det ett enkelt sätt att skapa lika breda kolumner för alla enheter: bara från .col-xl-* Ta bort siffrorna och använd endast på col-elementen .col-xl Klasser. Bootstrap kommer att känna igen hur många kolumner som finns och varje kolumn kommer att få samma bredd.

Om skärmdimensionenMindre än 1200px, kolumnerna kommer att ligga horisontellt.

<!-- Två kolumner: På överstor och större enheter är bredden 50% -->
<div class="row">
  <div class="col-xl">1 av 2</div>
  <div class="col-xl">2 av 2</div>
</div>
<!-- Fyra kolumner: På överstor och större enheter är bredden 25% -->
<div class="row">
  <div class="col-xl">1 av 4</div>
  <div class="col-xl">2 av 4</div>
  <div class="col-xl">3 av 4</div>
  <div class="col-xl">4 av 4</div>
</div>

Prova själv