手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >bootstrap3教程之bootstrap显示5列的方法
bootstrap3教程之bootstrap显示5列的方法
摘要: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 即可

【bootstrap3教程之bootstrap显示5列的方法】相关文章:

表格边框以虚线显示的css样式

如何用CSS自定义鼠标显示的形状

css教程:px和pt区别

CSS让ul所有的li居中显示的方法

CSS隐藏文字的方法

让div旋转一定的角度方法

清除浮动的空DIV方法

IE6 innerHTML写入的iframe src不显示BUG的解决方法

CSS教程网站制作新闻列表方法

firefox和谷歌不显示body背景图片的解决方法

精品推荐
分类导航