Bootstrap 5 ruudukko: erittäin pienet laitteet

Erittäin pieni laiteverkkoesimerkki

XSmall Small Medium Large Extra Large XXL
Luokan etuliite .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Näyttöleveys <576px >=576px >=768px >=992px >=1200px >=1400px

Oletetaan, että meillä on yksinkertainen asettelu, joka sisältää kaksi saraketta. Toivomme, että sarakkeet ovatKaikkiLaitteiden jakautuminen 25% / 75%.

Lisäämme seuraavat luokat kahteen sarakkeeseen:

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

Seuraava esimerkki johtaa kaikkiin laitteisiin (erittäin pienet, pienet, keskisuuret, suuret, erittäin suuret ja jättiläiset) 25% / 75% jakautumiseen.

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p>
    </div>
  </div>
</div>

Kokeile itse

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

33.3% / 66.6% erottelussa sinun tulisi käyttää .col-4 ja .col-8（50% / 50% erottelussa sinun tulisi käyttää .col-6 ja .col-6）：

Esimerkki

<!-- 33.3%/66.6% erottelu -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% erottelu -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, logona on suurpeikko ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980-luvulla WWF saapui virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta ja aloitti suojelutyön suurpeikkojen ja niiden elinympäristöjen hyväksi ...</p>
    </div>
  </div>
</div>

Kokeile itse

Automaattinen asettelu sarjoille

Bootstrap 5:ssä on yksinkertainen tapa luoda automaattinen asettelu kaikille laitteilleyhtä leveät sarjatVain .col-* Poista numerot ja käytä vain col-elementissä .col Luokat. Bootstrap tunnistaa kuinka monta sarjaa on, ja jokainen sarja saa saman leveyden:

<!-- Kaksi sarjaa: 50% leveys -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- Neljä sarjaa: 25% leveys -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Kokeile itse

Seuraavassa luvussa näytetään, miten erilaisia osuusprosentteja lisätään pieniin laitteisiin.