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

เราจะสร้างต้นแบบรูปแบบที่มีสองคอลัมน์ขึ้นมา สำหรับอุปกรณ์ขนาดเล็ก เราต้องการที่จะแบ่งคอลัมน์ 25% / 75%。

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

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

เราจะเพิ่มคลาสเหล่านี้ไปที่สองคอลัมน์:

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

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

ตัวอย่าง

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

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

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

สำหรับการแบ่ง 33.3% / 66.6%，คุณควรใช้ .col-sm-4 และ .col-sm-8สำหรับการแบ่ง 50% / 50%，คุณควรใช้ .col-sm-6 และ .col-sm-6)：

ตัวอย่าง

/* 33.3/66.6% split: */
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>องค์กร World Wide Fund for Nature (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โดยสัญลักษณ์ขององค์กรคือหมีป่าไอซี่ ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>ปี 1980 องค์กร WWF มาเข้าประเทศจีนอย่างเป็นทางการ ภายใต้ความเชิญชวนของรัฐบาลจีนเพื่อดำเนินการปกป้องหมีป่าไอซี่และสถานที่อยู่อาศัยของมัน ...</p>
    </div>
  </div>
</div>
<!-- การแบ่งสองส่วน 50%/50%: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>องค์กร World Wide Fund for Nature (WWF) ก่อตั้งขึ้นเมื่อวันที่ 29 เมษายน 1961 โดยสัญลักษณ์ขององค์กรคือหมีป่าไอซี่ ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>ปี 1980 องค์กร WWF มาเข้าประเทศจีนอย่างเป็นทางการ ภายใต้ความเชิญชวนของรัฐบาลจีนเพื่อดำเนินการปกป้องหมีป่าไอซี่และสถานที่อยู่อาศัยของมัน ...</p>
    </div>
  </div>
</div>

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

การจัดเก็บรูปแบบอัตโนมัติของคอลัมน์

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

หากขนาดหน้าจอต่ำกว่า 576pxคอลัมน์จะเก็บรวมตัวนอนตรงนั้น:

<!-- สองคอลัมน์: ความกว้าง 50% ของหน้าจอทุกๆครั้ง ยกเว้นอุปกรณ์ขนาดเล็กที่เรียบ (ความกว้าง 100%) -->
<div class="row">
  <div class="col-sm">1 ของ 2</div>
  <div class="col-sm">2 ของ 2</div>
</div>
<!-- สี่คอลัมน์: ความกว้าง 25% ของหน้าจอทุกๆครั้ง ยกเว้นอุปกรณ์ขนาดเล็กที่เรียบ (ความกว้าง 100%) -->
<div class="row">
  <div class="col-sm">1 ของ 4</div>
  <div class="col-sm">2 ของ 4</div>
  <div class="col-sm">3 ของ 4</div>
  <div class="col-sm">4 ของ 4</div>
</div>

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

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