首页 > 手机网站设计 > 交互设计 > bootstrap3教程之bootstrap显示5列的方法

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

2014-04-28    
字号:T|T

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 即可

相关报道:

所有评论仅代表网友意见。

手机网站制作 | 手机网站建设 | Html5教程 | 微信商城 | 微信营销 | 电子商务 | 手机建站 | 性价比最高的手机 | 关晓彤 | 投稿邮箱

浙ICP备07028869号

Copyright (C) 2008-2014 www.7kxs.com 4G手机网 版权所有