Bootstrap 5 rutnät: stora enheter

Kursrekommendationer:

Stora enhets rutnätsexempel XSmall Small Medium Large Extra Large
XXL Klassprefiks .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Skärmens bredd <576px >=768px >=992px >=1200px >=1400px

I föregående kapitel visade vi ett rutnätsexempel med klasser för små och mellansamma enheter. Vi använde två div (kolumner) och delade 25%/75% på små enheter och 50%/50% på mellansamma enheter:

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

Men på stora enheter kan en delning av 33% / 66% vara bättre.

Stora enheter definieras som skärmens breddFrån 992 pixlar till 1199 pixlar。

För stora enheter kommer vi att använda .col-lg-* Klasser:

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

På små enheter, använd innehåll som innehåller -sm- klasser. På mellansamma enheter, använd innehåll som innehåller -md- klasser. På stora enheter, använd innehåll som innehåller -lg- klasser.

Exempelvis kommer detta att leda till en delning av 25%/75% på små enheter, 50%/50% på mellansamma enheter och 33%/66% på stora, 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">
      <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">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skydd av panda och dess habitat...</p>
    </div>
  </div>
</div>

Prova själv

Observera:se till att summan är 12 eller mindre (det behövs inte att använda alla 12 tillgängliga kolumner):

endast använda Large

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

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har en panda som logotyp...</p>
    </div>
    <div class="col-lg-6">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skydd av 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 likabreda kolumner för alla enheter: bara från .col-lg-* ta bort siffrorna och använda endast på col-elementet .col-lg klasser. Bootstrap kommer att känna igen hur många kolumner det finns, och varje kolumn kommer att få samma bredd.

Om skärmdimensionenMindre än 992px, kolumnerna kommer att ligga horisontellt staplade:

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

Prova själv