Siatka: urządzenia średnie Bootstrap 5

Przykład siatki urządzeń średnich

XSmall Small Medium Large Extra Large XXL
przedrostek klasy .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
szerokość ekranu <576px >=576px >=768px >=992px >=1200px >=1400px

W poprzednim rozdziale pokazaliśmy przykład siatki, która zawiera klasy dla małych urządzeń. Użyliśmy dwóch div (kolumn) i nadaliśmy im podział 25% / 75%:

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

Ale na urządzeniach średnich projekt podziału 50% / 50% może wyglądać lepiej.

Urządzenia średnie są zdefiniowane jako szerokość ekranuod 768 pikseli do 991 pikseli.

Dla urządzeń średnich użyjemy .col-md-* klasy:

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

Na urządzeniach małych użyj zawierającej -sm- klas. Na urządzeniach średnich użyj zawierającej -md- klas.

Poniżej znajduje się przykład, który spowoduje podział na 25% / 75% na małych urządzeniach i 50% / 50% na urządzeniach średnich (oraz dużych, extra large i extra extra large). Na urządzeniach extra small automatycznie będzie się układał (100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda chińska ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić prace ochronne nad pandą chińską i jej siedliskiem ...</p>
    </div>
  </div>
</div>

Spróbuj sam

Uwaga:Upewnij się, że suma wynosi lub jest mniejsza niż 12 (nie musisz używać wszystkich 12 dostępnych kolumn):

tylko w Medium

W poniższym przykładzie określiliśmy tylko .col-md-6 Klasa (bez .col-sm-*）。Oznacza to, że urządzenia średnie, duże, extra duże i XXL będą dzielić się na 50% / 50% - ponieważ klasa się rozszerza. Jednak dla urządzeń małych i extra małych będą układane pionowo (szerokość 100%):

Przykład

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda chińska ...</p>
  </div>
  <div class="col-md-6">
    <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić prace ochronne nad pandą chińską i jej siedliskiem ...</p>
  </div>
</div>

Spróbuj sam

Automatyczne układanie kolumn

W Bootstrap 5 jest prosty sposób na utworzenie równo szerokich kolumn dla wszystkich urządzeń: po prostu usuń .col-md-* Usuń liczby i używaj tylko na elemencie col .col-md Klasa. Bootstrap rozpozna liczbę kolumn i każda kolumna będzie miała tę samą szerokość.

Jeśli rozmiar ekranuMniej niż 768px, kolumny będą układane poziomo:

<!-- Dwie kolumny: na urządzeniach średnich i większych szerokość wynosi 50% -->
<div class="row">
  <div class="col-md">1 z 2</div>
  <div class="col-md">2 z 2</div>
</div>
<!-- Cztery kolumny: na urządzeniach średnich i większych szerokość wynosi 25% -->
<div class="row">
  <div class="col-md">1 z 4</div>
  <div class="col-md">2 z 4</div>
  <div class="col-md">3 z 4</div>
  <div class="col-md">4 z 4</div>
</div>

Spróbuj sam

Następny rozdział pokaże, jak dodać różne procenty rozkładu dla dużych urządzeń.