网页制作 
首页 > 网页制作 > 浏览文章

bootstrap3教程之bootstrap显示5列的方法

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

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

在 head  里加载 bootstrap 的 css <link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 之后

自己再添加几个 css class


复制代码代码如下:
<style>
.col-lg-2dot4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1200px) {
.col-lg-2dot4 {
float: left;
}
.col-lg-2dot4 {
width: 20%;
}
.col-lg-pull-2dot4 {
right: 20%;
}
.col-lg-push-2dot4 {
left: 20%;
}
.col-lg-offset-2dot4 {
margin-left: 20%;
}
}
</style>

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

上一篇:css网站布局实录学习笔记第一部分
下一篇:利用边框border属性做小符号
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap