Bootstrap 5 rutnät: Från stapling till horisontellt

Rutnätsexempel: Stapling horisontellt

Låt oss skapa ett grundläggande rutnätssystem som börjar staplas på extra små enheter och sedan blir horisontellt på större enheter.

Följande exempel visar en enkel tvåkolumnig layout med "stapling horisontellt", vilket innebär att den kommer att dela sig i 50%/50% på alla skärmar, utom på extra små skärmar där den automatiskt staplas (100%):

Exempel: Stapling horisontellt

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Kolumn 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Kolumn 2 ...</p>
    </div>
  </div>
</div>

Prova själv

Tips:.col-sm-* Siffrorna i klassen indikerar hur många kolumner div:en ska korsa (totalt 12 kolumner). Så,.col-sm-1 över 1 kolumn.col-sm-4 över 4 kolumner.col-sm-6 över 6 kolumner, och så vidare.

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

Tips:Genom att använda .container-fluid klassen till .containerkan du ändra någon full bredd omvandlas till fast bredd Responsiv layout:

Exempel: Responsiv container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Kolumn 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Kolumn 2 ...</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-size-* Ta bort siffrorna och använd endast på col-elementen .col-size Klasser. Bootstrap identifierar hur många kolumner som finns och varje kolumn får samma bredd. Storleksklasser (sm, md osv.) bestämmer när kolumnerna ska vara responsiva:

<!-- Två kolumner: 50% bredd på alla skärmar, utom för ultra små 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 ultra små 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