Bootstrap Grid - เรียงซ้อนเป็นแนวนอน
Bootstrap Grid ตัวอย่าง: Stacked-to-horizontal
เราจะสร้างระบบกริดพื้นฐานที่เริ่มจากการซ้อนกันบนอุปกรณ์ขนาดเล็กพิเศษ ก่อนที่จะกลายเป็นแนวนอนบนอุปกรณ์ขนาดใหญ่
ตัวอย่างต่อไปนี้แสดงเลย์เอาต์แบบสองคอลัมน์ "เรียงซ้อนเป็นแนวนอน" อย่างง่าย ซึ่งหมายความว่าจะส่งผลให้มีการแบ่ง 50%/50% ในทุกหน้าจอ ยกเว้นหน้าจอขนาดเล็กพิเศษ ซึ่งจะเรียงซ้อนโดยอัตโนมัติ (100%):
col-sm-6
col-sm-6
ตัวอย่าง: Stacked-to-horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<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 เสมอ!
เคล็ดลับ:คุณสามารถเปลี่ยนเลย์เอาต์ความกว้างคงที่เป็นเลย์เอา ต์แบบ เต็มความกว้างได้โดยเปลี่ยน.containerคลาสเป็น.container-fluid:
ตัวอย่าง: ภาชนะบรรจุของเหลว
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>