源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-4-27 16:23:31 | 显示全部楼层 |阅读模式
这篇文章主要介绍了bootstrap3显示5列的方法,bootstrap是个12栅格的系统,显示5列比较麻烦,这里提供一个方法,需要的朋友可以参考下

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 即可

回复

使用道具 举报

2

主题

1万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2022-8-14 01:21:53 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

3

主题

1万

回帖

156

积分

注册会员

Rank: 2

积分
156
发表于 2022-9-23 00:40:03 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-30 11:02:09 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

27

主题

1万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-3-22 17:23:46 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-4 12:32:15 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

347

积分

中级会员

Rank: 3Rank: 3

积分
347
发表于 2023-9-28 13:25:13 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2023-10-11 10:23:22 | 显示全部楼层
的vgdsvsdvdsvdsvds
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-10-14 04:09:48 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-2 07:09:02 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-5-20 16:09 , Processed in 0.072782 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表