Bootstrap 5 rutenetværk: Fra stabelt til vandret

Rutenetværks eksempel: Stabelt vandret

Lad os oprette en grundlæggende rutenetværksstruktur, der starter med at stables på ekstremt små enheder og derefter bliver vandret på større enheder.

Følgende eksempel viser en enkel to-kolonne layout 'stabelt vandret', hvilket betyder, at den vil opdele alle skærme i 50%/50%, med undtagelse af ekstremt små skærme, hvor den automatisk vil stables (100%):

Eksempel: Stabelt vandret

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

Prøv det selv

Tip:.col-sm-* Tallet i klassen angiver, hvor mange kolonner div skal krydse (samlet 12 kolonner). Så,.col-sm-1 over 1 kolonne.col-sm-4 over 4 kolonner.col-sm-6 over 6 kolonner, osv.

Bemærk:Sørg for, at summen er lig med eller mindre end 12 (du behøver ikke at bruge alle 12 tilgængelige kolonner):

Tip:ved at bruge .container-fluid klasse til .container，kan du ændre enhver fuld bredde Layout konverteres til fast bredde Responsiv layout:

Eksempel: Responsiv container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Kolonne 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Kolonne 2 ...</p>
    </div>
  </div>
</div>

Prøv det selv

Automatisk layout kolonner

I Bootstrap 5 findes der en simpel måde at oprette ensbreddede kolonner for alle enheder på: bare fra .col-size-* Fjern tal og brug kun på col-elementet .col-size Klasser. Bootstrap kan identificere antallet af kolonner, og hver kolonne vil få samme bredde. Størrelsesklasser (sm, md osv.) bestemmer, hvornår kolonnerne skal reagere:

<!-- To kolonner: 50% bredde på alle skærme, undtagen ekstremt små enheder (100% bredde) -->
<div class="row">
  <div class="col-sm">1 af 2</div>
  <div class="col-sm">2 af 2</div>
</div>
<!-- Fire kolonner: 25% bredde på alle skærme, undtagen ekstremt små enheder (100% bredde) -->
<div class="row">
  <div class="col-sm">1 af 4</div>
  <div class="col-sm">2 af 4</div>
  <div class="col-sm">3 af 4</div>
  <div class="col-sm">4 af 4</div>
</div>

Prøv det selv