利用 bootstrap 写出五个等宽度的列

最近时间稍微多了一点，再写一个gallery 的程序，使用bootstrap 这个前端 framework

经过测算，每行五列是最好的。

熟悉bootstrap 的同学应该知道，bootstrap 使用的是12 grids 的方式来布局，也就是说很容易使用bootstrap 来编写 1,2,3,4,6,12列，5不能被12整除，所以想要用bootstrap 来写出5列，比较麻烦。网上大部分的办法都是各种hack，即复杂，又容易出错。

今天在网上看到了一个我认为最简单和实用的办法。其思想就是仿照bootstrap 的grid 系统，写出专门的用于5列的 css 类

 

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

ok, you’re good to go.