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

    获取指定不同发布类型的日志的评论

    注意了,本文所说的是调用不同发布类型(post_type)的日志所对应的评论,对于普通的评论的调用,WordPress get_comments 功能已经有了很详细的调用评论的参数。 $comments = get_comments( array( 'number' => 5, 'status' => 'approve', 'post_status' => 'publish', 'post_type' => 'product' ) );

  2. 2014.06.25

    支持触摸的 jQuery 响应式传送带滑块插件 – Owl Carousel

    Owl Carousel 是一个 jQuery Slider 插件,使我们能够迅速地创建响应式传送带滑块。这个插件是支持触摸功能,兼容 HTML 。另外,支持分页/滑动速度,启用/禁用自动播放,显示子弹导航等等,是你做WEB开发得力的工具。 插件下载 效果演示

  3. 2011.04.03

    WordPress自适应宽度主题 LSZ wpbus D2 完美版

    WordPress自适应宽度主题D2完美版的前身是主题巴士的 wpbus-D2,本来升级优化就是留着自己用的,但我对主题很难长时间的使用,总感觉想换一换,于是就在使用着现在的主题LSZ Thinky Pro V3.1,就把上一款主题分享给大家。 [caption id="attachment_2260" align="aligncenter" width="600" caption="WordPress灰色自适应宽度主题 LSZ wpbus D2 完美版"][/caption] 主题巴士的原生主题功能请围观:http://www.wpbus.com/?p=84 支持widget侧栏小工具(默认为日历,广告,分类,存档,热门文章,随机文章,最新评论,友情链接) 无插件支持调用热门文章,随机文章,带评论者头像最新评论,相关文章。 支持评论嵌套5层,评论分页。 主题自带后台可设置个性头像。 主题自带可添加网站流量统计代码。 左右两栏布局,右栏宽度自适应。 预留插件wp-pagenavi,wp-postviews接口,启用插件即可使用。…

  4. 没有图片

    2009.07.20

    KingCMS 2009 正式版发布

    KingCMS的口号是:情系开源,共拓网络!KingCMS 2009全面支持SEO优化,多语言支持;一站式管理多站,任意绑定域名;支持跨站调用标签,需PHP 5.1+ 环境,默认支持多数据库(MySQL 5+ 或 SQLite 3+);支持多种(WYSIWYG)编辑器,灵活的HTML样式模板标签,简单易学易部署;支持检索数据库并以KingCMS标签形式调用... 下载 KingCMS 2009 BETA(PHP)

  5. 没有图片

    2012.09.20

    Discuz!x2.5完整伪静态.htaccess代码,支持论坛、博客、门户伪静态

    前段时间因为玩DZ论坛,需要把博客伪静态,就写了这篇介绍Discuz!x2.5 .htaccess伪静态代码的文章,此文章支持博客伪静态,但今天又发现这篇文章里提到的代码不支持门户文章的伪静态,今天更新了一下,完美支持各种伪静态,代码直接复制到你的.htaccess文件里或直接下载我提供下载的文件,上传到博客根目录即可。 代码: # 将 RewriteEngine 模式打开 RewriteEngine On # 修改以下语句中的 /discuz 为你的论坛目录地址,如果程序放在根目录中,请将 /discuz 修改为 / RewriteBase / # Rewrite 系统规则请勿修改 RewriteCond…

  6. 没有图片

    2010.07.17

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

    WordPress 3.0 英文版早已发布很久了,按正常情况,简体中文包应该很快发布,但现在已经等待2个月之多,仍未见中文包的影子,在WordPress中文站一直还是那个可怜的WordPress 2.9.2。 菠萝作了一个大胆的猜测,这个大家可能不爱听,但菠萝确实是这样认为的:中国的一些互联网政策引起了WordPress开发者的反感,降低了他们发布中文包的兴趣。 近几年来,中国的互联网政策一直在搞自恋游戏,做着站着说话不腰疼、撒谎而不脸红的事情,明明在到处封杀,却自称”我们的网络是开放的“,”我的子民是自由的“,”我的子民有着完全的言论自由“...这些东西,不知情者还以为这些人真的很冤呢,知情者就会说”去TMD的自由吧“。 从Youtube到Google Docs,从Facebook到Twitter,哪个受到网民欢迎的网站不面临着被拒之墙外的命运?也许下一步,下一步就到了WordPress了,原因很简单,WordPress太受中国博主们欢迎了,它制造了大量的热爱自由、追求自由的博主,当然要受到封杀! 也许WordPress开发人员看到了这点,他们对中国失去了热情,也许他们想保留住几位中国用户,通过减慢中文版的发布,而减缓被封杀的命运...... 这些都是猜测,也许是菠萝多想了,但希望这些不要发生,因为,我们都爱着WordPress,不希望哪天只能通过翻墙才能看到自己喜欢的东西。

评论

还没有评论。

About

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