bootstrap3好代码教程之bootstrap显示5列的方法

穷则独善其身,达则兼善天下。没有梦想的人到达不了成功的彼岸,也就因此而看不到成功的辉煌。没有梦想的人生是失败的,因为他们根本看不到生命的意义。

bootstrap是个好东西,对于CSS不是很熟悉的同学可以用它快速的做个不丑的网站。

但是bootstrap是个12栅格的系统,显示5列比较麻烦,今天我也刚好有这个需求,就稍微研究了下,并且成功了。具体的做法是:

在 head 里加载 bootstrap 的 css <link rel="nofollow noopener noreferrer" 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 即可

以上就是bootstrap3好代码教程之bootstrap显示5列的方法。生活累,一小半源于生存,一小半源于攀比。更多关于bootstrap3好代码教程之bootstrap显示5列的方法请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

如何利用Bootstrap如何实现漂亮简洁的CSS3价格表实例源码