Bootstrap 5 -verkko: Staplattu horisontaaliseksi

Verkkoinstituutti: Tasasivutus horisontaalisesti

Luo perusverkkojärjestelmä, joka alkaa pienten laitteiden kanssa stackataan ja sitten muuttuu horisontaaliseksi suuremmilla laitteilla.

Seuraava esimerkki näyttää yksinkertaisen 'tasasivutus horisontaalisesti' -kaksisarakkeisen asettelun, mikä tarkoittaa, että se tuottaa 50%/50% -jakautumisen kaikilla näytöillä, paitsi erittäin pienillä näytöillä, joissa se stackataan automaattisesti (100%):

Esimerkki: Tasasivutus horisontaalisesti

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

Kokeile itse

Vinkki:.col-sm-* luokissa olevat numerot ilmaisevat, kuinka monta sarjaa div:n tulisi kattaa (yhteensä 12 sarjaa). Joten,.col-sm-1 yli 1 sarja.col-sm-4 yli 4 sarjaa.col-sm-6 yli 6 sarjaa, jne.

Huomio:Varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa sarjaa):

Vinkki:liittämällä .container-fluid luokan .containervoit muuttaa minkä tahansa full-width muunnetaan fixed-width Responsiivinen asettelu:

Esimerkki: Responsiivinen säiliö

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

Kokeile itse

Automaattinen asettelu sarjoille

Bootstrap 5:ssä on yksinkertainen tapa luoda yhtä leveitä sarjoja kaikille laitteille: vain poista .col-size-* Poista numerot ja käytä vain col-elementissä .col-size Luokat. Bootstrap tunnistaa kuinka monta sarjaa on, ja jokainen sarja saa saman leveyden. Koossa olevat luokat (sm, md jne.) määrittävät milloin sarjat tulisi vastata:

<!-- Kaksi sarjaa: 50% leveys kaikilla näytöillä, paitsi ekstremisti laitteilla (100% leveys) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Neljä sarjaa: 25% leveys kaikilla näytöillä, paitsi ekstremisti laitteilla (100% leveys) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Kokeile itse