主页 > 网站建设 >

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

网站建设 2023-01-28 21:39www.1681989.com免费网站

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

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

在 head 里加载 bootstrap 的 css <lk href="" rel="stylesheet"> 之后

自己再添加几个 css class

复制代码

代码如下:

<style>
.col-lg-2dot4 {
position: relative;
m-height: 1px;
paddg-right: 15px;
paddg-left: 15px;
}
@media (m-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 {
marg-left: 20%;
}
}
</style>

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

上一篇：利用边框border属性做小符号下一篇：css网站布局实录学习笔记第一部分

Copyright © 2016-2025 www.1681989.com 推火网版权所有 Power by