bootstrap3教程之bootstrap显示5列的方法
bootstrap3教程之bootstrap显示5列的方法
发布时间:2016-12-27 来源:查字典编辑
摘要:bootstrap是个好东西,对于CSS不是很熟悉的同学可以用它快速的做个不丑的网站。但是bootstrap是个12栅格的系统,显示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 即可

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类