Bootstrap 5 rutnät: medium enhet

Exempel på mellanstora enheters rutnät

XSmall Small Medium Large Extra Large XXL
Förkorta klassnamn .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å enheter. Vi använde två div (kolumner) och gav dem en delning av 25% / 75%:

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

Men på mellanstora enheter kan ett 50% / 50% delat utseende vara bättre.

Mellanstora enheter definieras som skärmens breddFrån 768 pixlar till 991 pixlar.

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

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

På små enheter, använd innehållande -sm- klassen. På mellanstora enheter, använd innehållande -md- klassen.

Nedanstående exempel kommer att leda till en delning av 25% / 75% på små enheter och 50% / 50% på mellanstora (och stora, jättestora och extrastora) 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">
      <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, har en panda som symbol...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att genomföra skydd av pandas och deras livsmiljö...</p>
    </div>
  </div>
</div>

Prova själv

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

endast använda Medium

i följande exempel specificerar vi bara .col-md-6 klasser (ingen .col-sm-*）。Detta innebär att medelstora, stora, jättestora och XXL-enheter kommer att dela 50% / 50% - eftersom denna klass expanderar. Men för små och extra små enheter kommer de att ligga vertikalt staplade (100% bredd):

Exempel

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, har en panda som symbol...</p>
  </div>
  <div class="col-md-6">
    <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att genomföra skydd av pandas och deras livsmiljö...</p>
  </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-md-* Ta bort siffror och använd endast på col-elementen .col-md Bootstrap kommer att känna igen hur många kolumner det finns och varje kolumn kommer att få samma bredd.

Om skärmdimensionenMindre än 768pxKolumner kommer att ligga horisontellt staplade:

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

Prova själv

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