利用 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.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.