TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
118篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
bootstrap4网格系统,布局
4858
人阅读
2020/8/11 17:20
总访问:
3837816
评论:
0
收藏:
0
手机
分类:
前端
tn> 我是一个后端,后端,后端……跑来写样式,吐槽一下,算了该做的还是要做。 ![](https://img.tnblog.net/arcimg/aojiancc/7f15a608d1e945feabe68a1013494848.jpg) <br/> 外层div使用row,里边使用col就可以实现均分了,有n个就n等分,这样想要做均分的布局就非常方便了 tn3#比如3个col就是三等分 ``` <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div> ``` tn3#比如5个col就是5等分 ``` <div class="row" style="margin-top: 20px"> <div class="col" style="background-color:#acbdff;">.col</div> <div class="col" style="background-color:#ffabcd;">.col</div> <div class="col" style="background-color:#acbdff;">.col</div> <div class="col" style="background-color:#ffabcd;">.col</div> <div class="col" style="background-color:#acbdff;">.col</div> </div> ``` ![](https://img.tnblog.net/arcimg/aojiancc/983fdd48a1014345b6155e2720280bac.png) tn3#需要有间隔设置margin值就行了 ``` <div class="professional_container" style="margin-top:46px"> <div class="title" style="font-weight: 600;font-size: 22px">系统化打造专业师资</div> <div class="row" style="margin-top: 20px"> <div class="col professional_item" style="background-color:#acbdff;">.col</div> <div class="col professional_item" style="background-color:#ffabcd;">.col</div> <div class="col professional_item" style="background-color:#acbdff;">.col</div> <div class="col professional_item" style="background-color:#ffabcd;">.col</div> <div class="col professional_item" style="background-color:#acbdff;">.col</div> </div> <div class="row" style="margin-top: 5px"> <div class="col professional_item" style="background-color:#acbdff;">.col</div> <div class="col professional_item" style="background-color:#ffabcd;">.col</div> <div class="col professional_item" style="background-color:#acbdff;">.col</div> <div class="col professional_item" style="background-color:#ffabcd;">.col</div> <div class="col professional_item" style="background-color:#acbdff;">.col</div> </div> </div> ``` 一点样式: ``` .professional_item { height: 100px; margin: 20px; } ``` ![](https://img.tnblog.net/arcimg/aojiancc/dfe65050ee4f422ca3b736c686423520.png) tn> 注意,均分的方式这样设置margin值才有效,如果接了后面的数值宽度就不够了,就会换行了。比如你设置两个div如果是 col-6,col-6这样后面带了具体的数值设置margin就会换行,但是col,col这种不指定具体数值的方式就不会。 <br/> > 当然设置margin也可以分别设置来根据实际需求调整 比如下面这样,根据上左下右来设置 ``` .specialist_container .item>div { margin: 10px 12px 10px 12px; } ``` 放点背景图片后效果就会好一点: ![](https://img.tnblog.net/arcimg/aojiancc/a0bba132fa7a4f1398dad8e4980b9c71.png) **如果不是均分,比例可以使用后面接数字来控制** bootstrap总共是占了12份,col-x 比如我想分成一个5份,其中4份各站的比例为2,另外一份占的比例为4,就可以这样 ``` <div class="row"> <div class="col-2" style="background-color:lavender;"></div> <div class="col-2" style="background-color:orange;"></div> <div class="col-2">.col</div> <div class="col-2">.col</div> <div class="col-4" style="background-color:#ffabcd;"></div> </div> ``` 哈哈哈,来看一下今天的布局效果: ![](https://img.tnblog.net/arcimg/aojiancc/cf02f58f56334f75a61f6085a92e4a34.png) 来来来体验一下后端程序员写的样式,请用电脑浏览哟: https://www.tnblog.net/zuxia_style/index.html
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}