Hướng Dẫn Tạo 5 Cột Trên Web Sử Dụng Bootstrap

Mặc định, Bootstrap chỉ cho phép tạo số cột là ước số của 12 gồm 1, 2, 3, 4, 6 cột.

Code sau đây giúp bạn tạo 5 cột trên website sử dụng Bootstrap.

Demo: Nhóc Shop

Cách 1:

Mã:

<div class="row">
    <div class="col-md-2 col-md-offset-1">Cột 1</div>
    <div class="col-md-2">Cột 2</div>
    <div class="col-md-2">Cột 3</div>
    <div class="col-md-2">Cột 4</div>
    <div class="col-md-2">Cột 5</div>
</div>

Cách 2:

Tạo CSS

Mã:

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

Để sử dụng:

Mã:

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

Cách 3:

Tùy chỉnh động dựa vào LESS và SASS

LESS: Nếu bạn custom bằng LESS thì sẽ tạo ra cột 2.4 (Tức là 2.4*5 = 12)

Mã:

.col-lg-2-4{
.make-lg-column(2.4)
}

.col-md-2-4{
.make-md-column(2.4)
}

.col-sm-2-4{
.make-sm-column(2.4)
}

SASS: Nếu sử dụng SASS thì tương tự LESS

Mã:

.col-lg-2-4{
@include make-lg-column(2.4)
}

.col-md-2-4{
@include make-md-column(2.4)
}

.col-sm-2-4{
@include make-sm-column(2.4)
}

Chúc các bạn thành công!

 

Cách 4:

Tạo mã CSS

Mã:

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}

Còn đây là mã HTML

Mã:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>