Bootstrap ตัวอย่างตาราง: ซ้อนกันไปในแนวนอน
เราจะสร้างระบบกริดพื้นฐานที่เริ่มต้นออกวางซ้อนกันบนโทรศัพท์มือถือ / แท็บเล็ต (อุปกรณ์ขนาดเล็ก) ก่อนที่จะกลายแนวนอนบนเดสก์ท็ (กลาง / อุปกรณ์ขนาดใหญ่)
ตัวอย่างต่อไปนี้แสดงให้เห็นง่ายรูปแบบสองคอลัมน์ "ซ้อนกันไปในแนวนอน" ซึ่งหมายความว่ามันจะส่งผลใน / 50% 50% แยกบนหน้าจอทั้งหมดยกเว้นสำหรับหน้าจอขนาดเล็กเป็นพิเศษซึ่งจะสแต็คโดยอัตโนมัติ (100%):
Col-SM-6
Col-SM-6
ตัวอย่าง: ซ้อนกันไปในแนวนอน
<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> ลองตัวเอง»