Bootstrap 生成5栏技巧及代码

玩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. 没有图片

    2009.12.06

    微软浏览器 Pivot 使用体验

    今天下载了微软的最新版本浏览器 Pivot,…

  2. 2012.05.13

    WordPress超简洁主题oiLost V1.0发布

    又一款原创Wordpress超级简洁主题正式…

  3. 没有图片

    2011.03.22

    12款免费的优秀高质量 HTML5+CSS3 模板

    HTML5是下一代主要的HTML编码规范,H…

  4. 没有图片

    2012.02.15

    Linux tar 压缩打包命令使用教程

    tar命令 [root@linux ~]# …

  5. 没有图片

    2011.04.04

    给你的页面添加返回顶部按钮

    大家应该都经历过,优秀的网页都会给人一个良好…

  6. 没有图片

    2012.06.23

    CentOS 6 安装后基本配置

    1.网络配置 (1)命令配置 # ifcon…

评论

还没有评论。