返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

Bootstrap 生成5栏技巧及代码

时间:2016-08-02 20:23来源:知行网www.zhixing123.cn 编辑:麦田守望者

玩Bootstrap的同学们都知道,Bootstrap默认是以12为总宽度,我们能做的栏目数只能是被12整除的数字,比如:1栏、2栏、3栏、4栏、6栏。。。但想来个5栏的布局就没办法了,下面是代码,直接拿去用吧。

把下面代码加入到 bootstrap.min.css文件中。

"
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
"
适应多种设备:

"
.col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }
"
在前端代码里这么搞:

"
<div class=“row”> <div class=“col-md-15 col-sm-3”> … </div> </div>
"
爽不爽?用了才知道。

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):Bootstrap
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片