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

    2011.04.08

    通过.htaccess文件为你的博客添加图片防盗链功能

    很好网友反映,自己好不容易发的日志,特别是图…

  2. 没有图片

    2013.11.04

    如何开启 Windows 8.1 远程桌面

    Windows 8.1 远程桌面默认是被系统…

  3. 2012.02.05

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

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

  4. 没有图片

    2009.09.06

    分享一下网上几乎绝迹的微博客饭否源码 Easytalk

    目前微博客已经成为一种主流交流平台,随着Tw…

  5. 没有图片

    2010.05.10

    支付宝如何获取交易安全验证码及合作者ID

    一、请在支付宝(http://alipay.…

  6. 没有图片

    2010.06.09

    用HDD Installer硬盘安装Windows 7

    常规的光盘启动安装Windows7小百度就不…

评论

还没有评论。