Bootstrap 5 网格：超大型设备

Mifano ya mtandao wa vifaa vya kubwa vya juu

XSmall Small Medium Large Extra Large XXL
Maua wa Class .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Upeo wa skirima <576px >=576px >=768px >=992px >=1200px >=1400px

Kwenye kitabu hiki, tunapokeza mifano wa mtandao ambao inaweza kufunguliwa kwa vifaa vichache, vya kesi na vya kubwa. Tumetumia div tatu (mashirika), na tukifanyia kufungua 25%/75% kwa vifaa vichache, 50%/50% kwa vifaa vya kesi, na 33%/66% kwa vifaa vya kubwa:

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

lakini kwa vifaa xlarge, mifano wa 20% / 80% hupungua inaweza kuwa bora zaidi.

Vifaa vya kubwa vya juu vilianzishwa kwa upeo wa skirima wa: 1200 pekee au zaidi.

Kwa vifaa xlarge, tutaendelea kwa kuitumia: .col-xl-* Class:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Mfano hii hupungua kwa vifaa vichache 25%/75%, kwa vifaa vya kesi 50%/50%, kwa vifaa vya kubwa 33%/66% na kwa xlarge na xxlarge hupungua 20%/80% vifaa. Kwa vifaa vya vijana, itakuwa hatarini kwa kumtaarifu (100%):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, inaeleza panda kama inayonunua ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980, WWF ilianza kwa urahisi nchini China, inasikitia maeneo ya yai ya panda na mafunzo yao ...</p>
    </div>
  </div>
</div>

Tafuta tena

Uamuzi:}Takuwa na uadilifu wa 12 kila wakati.

Kusaidia kwenye XLarge

Kwenye mafano ya hizi, tumekuwa na uadilifu wa .col-xl-6 Class (bila .col-lg-*,.col-md-* na/au .col-sm-*）。Hii inamaanisha kwamba xlarge na xxlarge vifaa vitakayofanywa kwa 50%/50%. lakini, kwa kibao, kibali, kibali na kibali, vitakayotumia urefu wa 100% (urefu wa kushika kushika):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, inaeleza panda kama inayonunua ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980, WWF ilianza kwa urahisi nchini China, inasikitia maeneo ya yai ya panda na mafunzo yao ...</p>
    </div>
  </div>
</div>

Tafuta tena

Mashua ya usambazaji

Kwenye Bootstrap 5, kuna mpangilio rahisi wa kumuea mawimbo yalikwesi kwenye vifaa vyote: tu ingiza kuanzia .col-xl-* Uingizaji namba katika kizazi, na tupu tupu kwenye class kama col .col-xl Class. Bootstrap itahofu ukweli wa mawimbo, na kila mawimbo itakuwa na urefu wenyewe.

Ikiwa ukanda wa skrimeni ni:Chini ya 1200px, mawimbo yana kusambaa kushika kushika:

<!-- Mawimbo mbili: Ina urefu wa 50% kwenye vifaa vya kubwa zaidi -->
<div class="row">
  <div class="col-xl">1 ya 2</div>
  <div class="col-xl">2 ya 2</div>
</div>
<!-- Mawimbo mitano: Ina urefu wa 25% kwenye vifaa vya kubwa zaidi -->
<div class="row">
  <div class="col-xl">1 ya 4</div>
  <div class="col-xl">2 ya 4</div>
  <div class="col-xl">3 ya 4</div>
  <div class="col-xl">4 ya 4</div>
</div>

Tafuta tena