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

    SupeSite 7.5 Discuz! 7.2 UCenter Home 同步登陆完美解决方案

    元旦这一天,中国博客联盟终 于改版完毕,但上…

  2. 2011.04.02

    博客启用WordPress主题:LSZ Thinky Pro V3.1

    今天博客开启了在 WordPress 原生主…

  3. 没有图片

    2011.11.10

    MT.MU主机缓存插件 WP Super Cache 安装与设置

    MT主机这么多年来,一直保持着博客主机界第一…

  4. 没有图片

    2009.07.28

    Pligg CMS Version 1.0.0 正式版+Pligg 汉化包

    Pligg CMS 原来的名字是Pligg …

  5. 没有图片

    2009.09.09

    关于Google Checkout

    今天打开一个英文站 Mylife ,在浏览这…

  6. 没有图片

    2009.10.22

    WordPress博客搬家之更换域名教程

    博客搬家一般有两种形式,一种就是换空间,一种…

评论

还没有评论。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!