การทำยันต์ 5 แถวสำหรับ bootstrap 3

ผมใช้ bootstrap บ่อยมากเรียกได้ถ้าจะทำเว็บ responsive ผมจะเลือก bootstrap เป็นตัวแรกเสมอในการทำ ตัว bootstrap นั้นมีระบบ grid system มาให้ใช้เลย โดยเราสามารถสร้างเนื้อหาได้หลากหลาย columm (แถว) แต่ผมติดปัญหาที่ว่าอยากทำยันต์ 5 แถว (ฮาๆ) เพื่อใช้ในการแสดงผล 5 column ฉะนั้นเราก็ต้องเพิ่ม class ให้กับมัน

วิธีเพิ่มการแสดงผล 5 แถว (column) ใน bootstrap 3

สร้างชื่อ class มารอไว้ก่อน 

[css] .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } [/css]

กำหนดสัดส่วนให้กับมัน

[css] .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } [/css]

เวลาเรานำไปใข้

[css]
...
[/css]

Thanks: www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap

25

Add new comment