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

web 2.0Sunday, June 21, 2015 - 13:51

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

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

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

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

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

.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;
    }
}

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

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

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

แนะนำให้อ่าน

แสดงความคิดเห็น