Bootstrap 4 Grid เรียงซ้อนเป็นแนวนอน
Bootstrap 4 Grid ตัวอย่าง: Stacked-to-horizontal
เราจะสร้างระบบกริดพื้นฐานที่เริ่มจากการซ้อนกันบนอุปกรณ์ขนาดเล็กพิเศษ ก่อนที่จะกลายเป็นแนวนอนบนอุปกรณ์ขนาดใหญ่
ตัวอย่างต่อไปนี้แสดงเลย์เอาต์แบบสองคอลัมน์ "เรียงซ้อนเป็นแนวนอน" อย่างง่าย ซึ่งหมายความว่าจะส่งผลให้มีการแบ่ง 50%/50% ในทุกหน้าจอ ยกเว้นหน้าจอขนาดเล็กพิเศษ ซึ่งจะเรียงซ้อนโดยอัตโนมัติ (100%):
ตัวอย่าง: Stacked-to-horizontal
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
เคล็ดลับ:ตัวเลขใน.col-sm-*คลาสระบุจำนวนคอลัมน์ที่ div ควรขยาย (จาก 12) ดังนั้น.col-sm-1ครอบคลุม 1 คอลัมน์.col-sm-4ครอบคลุม 4 คอลัมน์
.col-sm-6ครอบคลุม 6 คอลัมน์ เป็นต้น
หมายเหตุ:
ตรวจสอบให้แน่ใจว่าผลรวมรวมกันได้ไม่เกิน 12 หรือน้อยกว่า (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์):
เคล็ดลับ:คุณสามารถเปลี่ยนเลย์เอาต์ความกว้างคงที่เป็นเลย์เอา ต์แบบ เต็มความกว้างได้โดยเปลี่ยน.containerคลาสเป็น.container-fluid:
ตัวอย่าง: ภาชนะบรรจุของเหลว
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
คอลัมน์เค้าโครงอัตโนมัติ
ใน Bootstrap 4 มีวิธีง่ายๆ ในการสร้างคอลัมน์ที่มีความกว้างเท่ากันสำหรับอุปกรณ์ทั้งหมด: เพียงลบหมายเลขออกจาก คลาส และใช้องค์ประกอบ colตามจำนวนที่ระบุ
เท่านั้น Bootstrap จะรับรู้ว่ามีกี่คอลัมน์ และแต่ละคอลัมน์จะมีความกว้างเท่ากัน คลาสขนาดกำหนดเมื่อคอลัมน์ควรตอบสนอง:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>