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

ตัวอย่างเครืองโซ่ของอุปกรณ์ขนาดกลาง

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

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

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

อุปกรณ์ขนาดกลางถูกกำหนดโดยความกว้างของหน้าจอจาก 768 พิกเซลถึง 991 พิกเซล。

สำหรับอุปกรณ์ขนาดกลาง เราจะใช้ .col-md-* คลาส：

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

ในอุปกรณ์ขนาดเล็ก ใช้ -sm- ของคลาส。ในอุปกรณ์ขนาดกลาง ใช้ -md- ของคลาส。

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

ตัวอย่าง

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

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

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

ใช้ Medium

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

ตัวอย่าง

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 สัญลักษณ์ของมันคือหมาง ...</p>
  </div>
  <div class="col-md-6">
    <p>ปี 1980 องค์กร WWF มาถึงประเทศจีนอย่างเป็นทางการ ตามความเชิญชวนของรัฐบาลจีนเพื่อประกอบกิจกรรมการปกป้องหมางและที่อยู่อาศัยของมัน ...</p>
  </div>
</div>

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

คอลัมน์ตัวเอง

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

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

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

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

บทที่ต่อไปจะแสดงวิธีการเพิ่มสัดส่วนการแบ่งเป็นส่วนต่าง ๆ สำหรับอุปกรณ์ขนาดใหญ่