首页 > 网站 > WEB开发 > 正文

关于 bootstrap 3 显示 5 列的问题

2024-04-27 14:35:29
字体:
来源:转载
供稿:网友
关于 bootstrap 3 显示 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

 1 <style> 2 .col-lg-2dot4 { 3 position: relative; 4 min-height: 1px; 5 padding-right: 15px; 6 padding-left: 15px; 7 } 8 @media (min-width: 1200px) { 9 .col-lg-2dot4 {10 float: left;11 }12 .col-lg-2dot4 {13 width: 20%;14 }15 .col-lg-pull-2dot4 {16 right: 20%;17 }18 .col-lg-push-2dot4 {19 left: 20%;20 }21 .col-lg-offset-2dot4 {22 margin-left: 20%;23 }24 }25 </style>

然后需要显示 5 列的地方应用这个 class 即可


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表