Bootstrap 5 กริด: XXL

ตัวอย่างตรงของเครือข่ายอุปกรณ์ XXL

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

อุปกรณ์ XXL ถูกนิยามว่ามี 1400 พิกเซลและสูงกว่าของความกว้างหน้าจอ

ตัวอย่างนี้จะสร้างการแบ่งสองฝั่งที่ 50%/50% ในอุปกรณ์ขนาดกลาง ใหญ่และมหาฮมาย และ 25%/75% ในอุปกรณ์ XXL ในอุปกรณ์ขนาดเล็กและขนาดเล็กที่สุด มันจะเรียกใช้ระบบตั้งตารางอัตโนมัติ (100%) :

ตัวอย่าง

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>มูลนิธิเพื่อธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 สิงหาคม 1961 สัญลักษณ์ของมูลนิธิคือหมาปาง ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>ปี 1980 โวร์ล วอร์เนส แฟรนด์ วอร์เนอร์ (WWF) มาเข้ามาที่ประเทศจีนเพื่อรับเชิญจากรัฐบาลจีนมาปฏิบัติงานด้านการปกป้องหมายและสิ่งแวดล้อมของหมาปาง ...</p>
    </div>
  </div>
</div>

ทดลองด้วยตัวเอง

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

ใช้เฉพาะ XXL

ในตัวอย่างด้านล่างนี้ เราได้ระบุ .col-xxl-6 คลาส (ไม่มี .col-md-* และ / หรือ .col-sm-*）。นี่หมายความว่าอุปกรณ์ xxlarge จะแบ่ง 50%/50% แต่สำหรับอุปกรณ์ extra-large, large, medium, small และ extra-small จะถูกจัดเรียงตรงข้าม (ความกว้าง 100%)

ตัวอย่าง

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>มูลนิธิเพื่อธรรมชาติโลก (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 สิงหาคม 1961 สัญลักษณ์ของมูลนิธิคือหมาปาง ...</p>
    </div>
    <div class="col-xxl-6">
      <p>ปี 1980 โวร์ล วอร์เนส แฟรนด์ วอร์เนอร์ (WWF) มาเข้ามาที่ประเทศจีนเพื่อรับเชิญจากรัฐบาลจีนมาปฏิบัติงานด้านการปกป้องหมายและสิ่งแวดล้อมของหมาปาง ...</p>
    </div>
  </div>
</div>

ทดลองด้วยตัวเอง

เรียงลำดับเนื้อหาอัตโนมัติ

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

หากขนาดหน้าจอต่ำกว่า 1400pxคอลัมน์จะถูกจัดเรียงตรงนอน:

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

ทดลองด้วยตัวเอง