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

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

CSS基础教程:CSS属性结合起来使用

添加css样式的三种方法

overflow解决float浮动后高度自适应问题

css基础教程之CSS基础语法

CSS条状图表形式的实现方法

CSS教程:闭合CSS浮动元素的几种方法

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

Div CSS实例教程:页面制作方法

用CSS来控制网页背景

精品推荐
分类导航