Bootstrap 5 grid: XXL

XXL aparato grid instance

XSmall Small Medium Large Extra Large XXL
paunang klase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
lapad ng screen <576px >=576px >=768px >=992px >=1200px >=1400px

Ang XXL aparato ay tinukoy na may 1400 pixel at sa ibabawng lapad ng screen.

Ang halimbawa ay magbibigay ng 50% / 50% na paghihiwalay sa medium, large at ultra-large na aparato, at 25% / 75% na paghihiwalay sa XXL aparato. Sa maliit at ultra-maliit na aparato, ito ay awtomatikong maghihipas (100%):

Halimbawa

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, hinayang ng pamahalaan ng Tsina na magsagawa ng pagsasagip sa pangkaragatan ng panda at ang kanyang tirahan...</p>
    </div>
  </div>
</div>

Subukan Nang Higit Pa

Pansin:Siguraduhing ang kabuuan ay palaging 12.

Lamang gamitin XXL

Sa halimbawa, ang aming pinaghintay ay lamang ang .col-xxl-6 klase (walang .col-md-* at / o .col-sm-*）。Ito ay nangangahulugan na ang aparato na may xxlarge ay ititangi 50/50%. Subalit, para sa ultra-large, large, medium, small at ultra-small aparato, ito ay magpahiling ng patag (100% lapad):

Halimbawa

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-xxl-6">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, hinayang ng pamahalaan ng Tsina na magsagawa ng pagsasagip sa pangkaragatan ng panda at ang kanyang tirahan...</p>
    </div>
  </div>
</div>

Subukan Nang Higit Pa

Mga kolum na may awtomatikong paglala

Sa Bootstrap 5, mayroong simpleng paraan upang gumawa ng magkaparehong lapad ng mga kolum para sa lahat ng aparato: lumisan lamang mula sa .col-xxl-* Alisin ang numero sa loob, at gamitin lamang ang elementong col .col-xxl Ang klase. Bootstrap ay makikilala kung gaano karami ang mga kolum, at ang bawat kolum ay makakakuha ng kaparehong lapad.

Kung ang sukat ng screenKung mas mababa sa 1400px, ang kolum ay magpahiling ng kalat tangahero:

<!-- Dalawang kolum: ang lapad ay 50% sa mga malalaking aparato at sa ibang klase -->
<div class="row">
  <div class="col-xxl">1 ng 2</div>
  <div class="col-xxl">2 ng 2</div>
</div>
<!-- Apat na kolum: ang lapad ay 25% sa mga malalaking aparato at sa ibang klase -->
<div class="row">
  <div class="col-xxl">1 ng 4</div>
  <div class="col-xxl">2 ng 4</div>
  <div class="col-xxl">3 ng 4</div>
  <div class="col-xxl">4 ng 4</div>
</div>

Subukan Nang Higit Pa