Bootstrap 5 เกณฑ์: อุปกรณ์ขนาดใหญ่ยิ่ง

คำแนะนำหลักสูตร：

อุปกรณ์ขนาดใหญ่เครืองโครงรูป XSmall Small Medium Large Extra Large
XXL หน้าแนวของชั้น .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- หน้าจอ <576px >=768px >=992px >=1200px >=1400px

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

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

แต่บนอุปกรณ์ขนาดใหญ่ ออกแบบแบ่งแยก 33% / 66% อาจดีขึ้น

อุปกรณ์ขนาดใหญ่ถูกนิยามว่าเป็นความกว้างของหน้าจอจาก 992 พิกเซลถึง 1199 พิกเซล。

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

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

บนอุปกรณ์ขนาดเล็ก โปรดใช้ที่มี -sm- ของชั้น。บนอุปกรณ์ขนาดกลาง โปรดใช้ที่มี -md- ของชั้น。บนอุปกรณ์ขนาดใหญ่ โปรดใช้ที่มี -lg- ของชั้น。

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

ตัวอย่าง

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

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

คำเตือน：ให้ความตรงกันตรงข้ามกันหรือต่ำกว่า 12 (ไม่จำเป็นต้องใช้ทุกคอลัมน์ที่มีอยู่ทั้งหมด)

ใช้ Large เท่านั้น

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

ตัวอย่าง

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

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

คอลัมน์ตั้งตารางโดยอัตโนมัติ

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

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

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

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