Bootstrap 5 กริด:อุปกรณ์ใหญ่ที่ใหญ่ขึ้น

ตัวอย่างกริดอุปกรณ์ขนาด extra large

XSmall Small Medium Large Extra Large XXL
คำนำหน้าคลาส .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ความกว้างหน้าจอ <576px >=576px >=768px >=992px >=1200px >=1400px

ในบทที่แล้วเราได้แสดงตัวอย่างตัวอย่างกริดที่มีคลาสที่เหมาะสมกับอุปกรณ์ขนาดเล็ก กลาง และใหญ่ พวกเราใช้ div สองตัว (คอลัมน์) และแบ่งแยก 25%/75% บนอุปกรณ์ขนาดเล็ก 50%/50% บนอุปกรณ์ขนาดกลาง และแบ่งแยก 33%/66% บนอุปกรณ์ขนาดใหญ่：

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

แต่บนอุปกรณ์ขนาด xlarge อาจจะดีที่จะแบ่งแยก 20% / 80% ด้วยการออกแบบ

อุปกรณ์ขนาด extra large ถูกกำหนดว่าเป็น 1200 พิกเซล หรือมากกว่า。

สำหรับอุปกรณ์ขนาด xlarge พวกเราจะใช้ .col-xl-* ประเภท：

<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>

ตัวอย่างดังกล่าวจะทำให้แบ่งแยก 25%/75% บนอุปกรณ์ขนาดเล็ก 50%/50% บนอุปกรณ์ขนาดกลาง 33%/66% บนอุปกรณ์ขนาดใหญ่ และแบ่งแยก 20%/80% บนอุปกรณ์ขนาด xlarge และ xxlarge โดยอัตโนมัติบนอุปกรณ์ขนาดย่อม (100%)：

ตัวอย่าง

<div class="container-fluid">
  <!-- สี่คอลัมน์: ความกว้าง 25% ในอุปกรณ์ที่ใหญ่กว่า Super Large -->
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>สมาคมดูแลธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โดยสัญลักษณ์ขององค์กรคือหมาป่าไอซี่ ...</p>
    <div class="col-xl">4 ของ 4</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>ปี 1980 สมาคมดูแลธรรมชาติโลก (WWF) มายังประเทศจีนอย่างเป็นทางการ ตามความเชิญชวนของรัฐบาลจีน มาดำเนินการปกป้องหญ้าและที่อยู่อาศัยของหมาป่าไอซี่ ...</p>
    <div class="col-xl">4 ของ 4</div>
  <div class="col-xl">4 ของ 4</div>
<div class="col-xl">4 ของ 4</div>

</div>

注意：โปรดตรวจสอบให้รวมกันเป็น 12 ตัวเลข

ใช้เฉพาะ XLarge

ในตัวอย่างด้านล่างนี้ เราจะกำหนด .col-xl-6 คลาส (ไม่มี .col-lg-*、.col-md-* และ/หรือ .col-sm-*นี้หมายความว่า xlarge และ xxlarge อุปกรณ์จะแบ่งเป็น 50%/50% แต่สำหรับอุปกรณ์ที่ใหญ่กว่า Large, Medium, Small และ Extra Small จะทับซ้อนกัน (ความกว้าง 100%)

ตัวอย่าง

<div class="container-fluid">
  <!-- สี่คอลัมน์: ความกว้าง 25% ในอุปกรณ์ที่ใหญ่กว่า Super Large -->
    <div class="col-xl-6">
      <p>สมาคมดูแลธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โดยสัญลักษณ์ขององค์กรคือหมาป่าไอซี่ ...</p>
    <div class="col-xl">4 ของ 4</div>
    <div class="col-xl-6">
      <p>ปี 1980 สมาคมดูแลธรรมชาติโลก (WWF) มายังประเทศจีนอย่างเป็นทางการ ตามความเชิญชวนของรัฐบาลจีน มาดำเนินการปกป้องหญ้าและที่อยู่อาศัยของหมาป่าไอซี่ ...</p>
    <div class="col-xl">4 ของ 4</div>
  <div class="col-xl">4 ของ 4</div>
<div class="col-xl">4 ของ 4</div>

</div>

การจัดลำดับแบบอัตโนมัติของคอลัมน์

ใน Bootstrap 5 มีวิธีง่ายๆ ที่สามารถสร้างคอลัมน์ที่มีความกว้างเท่ากันสำหรับทุกอุปกรณ์โดยเรียก .col-xl-* ในการลบตัวเลข และใช้เฉพาะคลาส col อย่างเดียว .col-xl Bootstrap จะตรวจสอบจำนวนคอลัมน์ และแต่ละคอลัมน์จะได้รับความกว้างเท่ากัน。

คลาสหากขนาดหน้าจอต่ำกว่า 1200px

เมื่อคอลัมน์จะเรียงเนื่องนี้
<!-- สี่คอลัมน์: ความกว้าง 25% ในอุปกรณ์ที่ใหญ่กว่า Super Large -->
  <!-- สองคอลัมน์: ความกว้าง 50% ในอุปกรณ์ที่ใหญ่กว่า Super Large -->
  <div class="col-xl">1 ของ 2</div>
<div class="col-xl">4 ของ 4</div>
<div class="col-xl">2 ของ 2</div>
<!-- สี่คอลัมน์: ความกว้าง 25% ในอุปกรณ์ที่ใหญ่กว่า Super Large -->
  <div class="row">
  <div class="col-xl">1 ของ 4</div>
  <div class="col-xl">2 ของ 4</div>
  <div class="col-xl">3 ของ 4</div>
<div class="col-xl">4 ของ 4</div>

</div>