關於 bootstrap 3 顯示 5 列的問題

bootstrap是個好東西，對於CSS不是很熟悉的同學可以用它快速的做個不丑的網站。

 

但是bootstrap是個12柵格的系統，顯示5列比較麻煩，今天我也剛好有這個需求，就稍微研究了下，並且成功了。具體的做法是：

 

在 head  里加載 bootstrap 的 css <link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 之后

自己再添加幾個 css class

<style>
.col-lg-2dot4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1200px) {
.col-lg-2dot4 {
float: left;
}
.col-lg-2dot4 {
width: 20%;
}
.col-lg-pull-2dot4 {
right: 20%;
}
.col-lg-push-2dot4 {
left: 20%;
}
.col-lg-offset-2dot4 {
margin-left: 20%;
}
}
</style>

 

然后需要顯示 5 列的地方應用這個 class 即可