Bootstrap 5 rutnät: liten enhet

Små enheters nä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. För små enheter vill vi dela upp kolonnerna 25% / 75%.

Små enheter definieras som skärmens breddFrån 576 pixlar till 767 pixlar。

För små enheter kommer vi att använda .col-sm-* klass.

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

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

Nedanstående exempel kommer att skapa en delning på 25% / 75% på små (och medelstora, stora, extra stora och jättestora) enheter. På mycket små enheter kommer den att staplas automatiskt (100%):

Exempel

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

Prova själv

Observera:Se till att summan är 12 eller mindre (använd inte alla 12 tillgängliga kolumner):

För 33.3% / 66.6% delning, bör du använda .col-sm-4 och .col-sm-8För 50% / 50% delning, bör du använda .col-sm-6 och .col-sm-6)：

Exempel

33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, har en panda som logotyp...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980, kom WWF officiellt till Kina, inbjuden av den kinesiska regeringen för att genomföra skydd av panda och dess habitat...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, har en panda som logotyp...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980, kom WWF officiellt till Kina, inbjuden av den kinesiska regeringen för att genomfö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 lika breda kolumner för alla enheter: bara från .col-sm-* ta bort siffror och använd endast col-elementanvänds .col-sm Bootstrap kommer att känna igen hur många kolumner det finns och varje kolumn kommer att få samma bredd.

Om skärmstorlekenMindre än 576pxKolumner kommer att staplas horisontellt:

<!-- Två kolumner: 50% bredd på alla skärmar, utom för ultrasmå enheter (100% bredd) -->
<div class="row">
  <div class="col-sm">1 av 2</div>
  <div class="col-sm">2 av 2</div>
</div>
<!-- Fyra kolumner: 25% bredd på alla skärmar, utom för ultrasmå enheter (100% bredd) -->
<div class="row">
  <div class="col-sm">1 av 4</div>
  <div class="col-sm">2 av 4</div>
  <div class="col-sm">3 av 4</div>
  <div class="col-sm">4 av 4</div>
</div>

Prova själv

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