关于 bootstrap 3 显示 5 列的问题_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:05:35
原创
1161人浏览过

bootstrap是个好东西,对于css不是很熟悉的同学可以用它快速的做个不丑的网站。

 

但是bootstrap是个12栅格的系统,显示5列比较麻烦,今天我也刚好有这个需求,就稍微研究了下,并且成功了。具体的做法是:

 

在 head  里加载 bootstrap 的 css  之后

立即学习前端免费学习笔记(深入)”;

自己再添加几个 css class

 1 <style> 2 .col-lg-2dot4 { 3 position: relative; 4 min-height: 1px; 5 padding-right: 15px; 6 padding-left: 15px; 7 } 8 @media (min-width: 1200px) { 9 .col-lg-2dot4 {10 float: left;11 }12 .col-lg-2dot4 {13 width: 20%;14 }15 .col-lg-pull-2dot4 {16 right: 20%;17 }18 .col-lg-push-2dot4 {19 left: 20%;20 }21 .col-lg-offset-2dot4 {22 margin-left: 20%;23 }24 }25 </style>
登录后复制

 

然后需要显示 5 列的地方应用这个 class 即可

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号