ตารางมูลนิธิ - อุปกรณ์ขนาดเล็ก
สมมติว่าเรามีรูปแบบตารางง่ายบนอุปกรณ์ขนาดเล็กสองอัตราส่วนความกว้างของ 25% และ 75%
เคล็ดลับ: กำหนดหน้าจอของอุปกรณ์เล็ก ๆ น้อยกว่า 40.0625em
เราใช้อุปกรณ์ขนาดเล็ก .small-* หมวดหมู่
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
ตัวอย่างต่อไปนี้ตั้งสองคอลัมน์อัตราส่วนคือ 25% และ 75% (มูลนิธิเป็นมือถือครั้งแรก: ถ้าไม่ได้ระบุอุปกรณ์ที่มีขนาดใหญ่จะได้รับมรดกรหัสระดับ .small): .small . ในพวกเขาเหล่านั้นและการใช้งาน "
ตัวอย่าง
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาดเล็ก 3 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p>? กวดวิชานี้ </ p>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p>? กวดวิชานี้ </ p>
</ div>
</ div>
<ระดับ Div = "ขนาดเล็ก 3 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p>? กวดวิชานี้ </ p>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p>? กวดวิชานี้ </ p>
</ div>
</ div>
ลอง»
 | หมายเหตุ: เพื่อให้แน่ใจว่าจำนวนของคอลัมน์เพิ่มขึ้นถึง 12! |
|---|
หากคุณจำเป็นต้องตั้งค่าอัตราส่วน 33.3% / 66.6% คุณสามารถใช้ .small-4 และ .small-8 :
ตัวอย่าง
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาดเล็ก 4 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p>? กวดวิชานี้ </ p>
</ div>
<div class = "ขนาดเล็ก 8 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p>? กวดวิชานี้ </ p>
</ div>
</ div>
<ระดับ Div = "ขนาดเล็ก 4 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p>? กวดวิชานี้ </ p>
</ div>
<div class = "ขนาดเล็ก 8 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p>? กวดวิชานี้ </ p>
</ div>
</ div>
ลอง»