Bootstrap 5 grid: överliten enhet

Extrasmå enhetsnätverksexempel

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

Anta att vi har ett enkelt layout med två kolumner. Vi vill att kolumnerna ska varaAllaEnhet delning 25% / 75%.

Vi lägger till följande klasser i två kolumner:

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

Följande exempel kommer att leda till en 25% / 75% delning för alla enheter (extra små, små, medelstora, stora, extra stora och mycket stora).

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har ett logotyp som är en stor panda ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skyddskaraktärer och deras habitat ...</p>
    </div>
  </div>
</div>

Prova själv

Observera:Se till att summan är lika med eller mindre än 12 (det är inte nödvändigt att använda alla 12 tillgängliga kolumner):

För 33.3% / 66.6% split, använd .col-4 och .col-8För 50% / 50% split, använd .col-6 och .col-6）：

Exempel

<!-- 33.3%/66.6% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har ett logotyp som är en stor panda ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skyddskaraktärer och deras habitat ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundat den 29 april 1961, har ett logotyp som är en stor panda ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att utföra skyddskaraktärer och deras habitat ...</p>
    </div>
  </div>
</div>

Prova själv

Automatisk layoutkolumn

I Bootstrap 5 finns det ett enkelt sätt att skapalikabreda kolumnerEndast från .col-* Ta bort siffror och använd endast på col-elementen .col Klasser. Bootstrap identifierar hur många kolumner som finns och varje kolumn får samma bredd:

<!-- Två kolumner: 50% bredd -->
<div class="row">
  <div class="col">1 av 2</div>
  <div class="col">2 av 2</div>
</div>
<!-- Fyra kolumner: 25% bredd -->
<div class="row">
  <div class="col">1 av 4</div>
  <div class="col">2 av 4</div>
  <div class="col">3 av 4</div>
  <div class="col">4 av 4</div>
</div>

Prova själv

Nästa kapitel kommer att visa hur man lägger till olika delningsprocent för små enheter.