手机
当前位置:查字典教程网 >网页设计 > 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列的方法】相关文章:

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

css实现鼠标悬停时滑出层提示的方法

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

CSS3之边框多颜色Border-color属性使用示例

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

CSS:清除浮动的最优方法

纯CSS实现鼠标悬停提示的方法

Ext Grid控件的配置与方法

CSS书写规范及书写顺序的方法

css教程:选择合适的、有意义的元素描述内容

精品推荐
分类导航