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

    2010.03.25

    Adobe CS5功能介绍及相关视频

    Adobe在之前已经公布了很多cs5软件的新…

  2. 没有图片

    2011.06.08

    卡巴斯基发布Anti-Virus 与 Internet Security 2012

    大家熟悉的老牌杀毒软件卡巴斯基 Anti-V…

  3. 2012.05.14

    [主题推荐]WordPress CMS主题:Hcms1.2

    菠萝一般发布的主题都是自己写或优化的一些主题…

  4. 2012.02.05

    2012新主题:Cimple V1.0正式发布

    你没进错地方,你现在看到的确实还是我的博客,…

  5. 没有图片

    2012.02.15

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

    tar命令 [root@linux ~]# …

  6. 2012.12.20

    WordPress超级简洁主题:X2013

    明天就是2012年12月21日,也是大家最关…

评论

还没有评论。