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

    2012.03.01

    10个CSS3灯箱切换特效

    灯箱效果一般使用javascript来实现,…

  2. 没有图片

    2013.04.23

    CentOS 6.4 系统各个目录的作用详解

    文章转载自网络,留作自己没事参考之用,估计对…

  3. 没有图片

    2009.11.23

    百度文档分享平台上线

    逛了一圈,发现百度新上线了百度文档分享平台,…

  4. 没有图片

    2010.12.01

    WordPress日志、分类批量管理插件:Batch Cat

    本来菠萝筐的日志分类相当多,最多的时候达到2…

  5. 没有图片

    2013.12.31

    如何制作 Mountain Lion 全新安装U盘(转)

    昨天搞到手一台 MACBook Pro 15…

  6. 没有图片

    2009.12.08

    DedeCMS 提示信息框美化教程

    因为做站的需要,有时用户投稿之后会跳出来一个…

评论

还没有评论。