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.10.17

    Google Drive 云端硬盘下载及安装失败解决办法&完整安装包下载

    这几天试用了一下谷歌云端硬盘(Google …

  2. 没有图片

    2013.04.08

    WordPress主题:x2013 Pro V2.0 发布

    经过近一个月的精心的准备,WordPress…

  3. 没有图片

    2012.11.19

    萌芽主机一周年,旗下MT主机限时活动开始!

    庆祝萌芽主机健康运营一周年,感谢一年来朋友们…

  4. 没有图片

    2009.07.05

    总结一下Firefox众生相 你是哪一相?

    Firefox 3.5正式版已经放出,必将在…

  5. 没有图片

    2009.12.10

    Google Chrome 扩展 Google Wave Notifier

    上次给大家介绍了Firefox插件Googl…

  6. 没有图片

    2011.04.20

    WordPress默认评论样式CSS类

    今天折腾了一下博客的评论CSS,其实Word…

评论

还没有评论。