เกณฑ์เรือน Bootstrap 5: จากจัดเรียงตรงข้ามไปยังระดับนอน

ตัวอย่างเกณฑ์เรือน: จัดเรียงตรงนอน

ให้เราสร้างระบบเกณฑ์เรือนธรรมดาที่เริ่มจากอุปกรณ์ขนาดเล็กที่จะเรียงตรงข้าม แล้วจึงเปลี่ยนเป็นระดับนอนบนอุปกรณ์ที่ใหญ่ขึ้น。

ตัวอย่างด้านล่างนี้แสดงการจัดเรียงสองคอลัมน์ของ 'จัดเรียงตรงนอน' ที่เรียบง่าย ซึ่งหมายความว่ามันจะแบ่งเป็น 50%/50% บนทุกหน้าจอ ยกเว้นหน้าจอขนาดเล็กที่จะเรียงตรงข้าม (100%) :

ตัวอย่าง: จัดเรียงตรงนอน

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>คอลัมน์ 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>คอลัมน์ 2 ...</p>
    </div>
  </div>
</div>

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

คำเตือน:.col-sm-* ตัวเลขในคลาสมีความหมายว่า div ควรข้างกว้างเท่ากับเลขคอลัมน์ที่กำหนด (ทั้งหมด 12 คอลัมน์) นั้นเท่านั้น。เรียบร้อยเรียบร้อย.col-sm-1 ข้าง 1 คอลัมน์.col-sm-4 ข้าง 4 คอลัมน์.col-sm-6 ข้าง 6 คอลัมน์ และอื่น ๆ

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

คำเตือน:โดยการใช้ .container-fluid คลาสเป็น .containerคุณสามารถเปลี่ยน full-width การเปลี่ยนแปลงทางรูปแบบเป็น fixed-width ที่มีตัวแปร:

ตัวอย่าง: ท่องความสำนึกที่ตอบสนอง

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>คอลัมน์ 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>คอลัมน์ 2 ...</p>
    </div>
  </div>
</div>

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

ตารางแนวที่อัตโนมัติ

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

<!-- สองคอลัมน์: ความกว้าง 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>

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