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

    CentOS 6 安装后基本配置

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

  2. 2014.11.05

    近来WordPress博客受漏洞攻击原因分析

    近来,很多基于WordPress建设的博客或…

  3. 没有图片

    2010.07.17

    WordPress 3.0 中文包迟迟不发的一点感慨

    WordPress 3.0 英文版早已发布很…

  4. 没有图片

    2010.04.20

    DedeCMS 5.6 正式版发布

    今天午饭后,闲着没事,就打开DedeCMS官…

  5. 没有图片

    2009.08.26

    UCenter Home 2.0 正式版发布

    刚刚安装上 UCenter Home 2.0…

  6. 没有图片

    2012.02.10

    自定义WordPress上传文件类型

    目前WordPress默认支持大部分图片等文…

评论

还没有评论。