BootStrap栅格之间留空隙的解决方法
目录
- 【看个例子】:
- 【原效果如下】:
- 【原因如下】:
- 【解决方法】:
- 总结
margin
外边距来使它们分离从而产生空隙,这样做真的的可以吗?【BootStrap栅格之间留空隙的解决方法】
【看个例子】: css样式:
.row div { height: 100px; }
html代码:
【原效果如下】:
文章图片
现在我们想让这三个部分之间相隔一段距离(10px)达到产生空隙的效果,但不能改变原来的布局,这里我们给它增加一个margin值:
css样式改为:
.row div {height: 100px; margin-right:10px; }
【添加margin值后的效果】:
文章图片
观察发现,有一个部分被挤了下来,也就是说这一波操作改变了原来的栅格布局。
【原因如下】: 我们在划分栅格时,划分的每一部分都是占满的,挤在一起的,要使每一列之间产一个空白空隙,因此你给它们加一个
margin
值(而本身每一部分栅格的大小不变),那么每一部分就会移动,因此必定会超出父级container容器的宽度(12份)。文章图片
通过上述的操作及解释,我们知道是不能通过设置
margin
值来使得栅格系统达到空出空隙的效果,那我们该如何解决呢?【解决方法】: 我们可以给每个小列设置一个
padding-right
值,小列里面再放一个盒子,通过设置它的宽度width:100%(同父级嘛)即可!css样式:
.row div {padding-left: 0px; // 去掉默认的左paddingpadding-right: 10px; height: 100px; } .hezi {width: 100%; background-color: green; }
html代码:
注:BootStrap的栅格系统对于响应式的网页开发非常方便,在使用栅格系统的时候可以非常方便的时候row和col--来控制布局。但是col--
默认会带15像素的左右padding
,这个会比较困扰。解决方案可以在内部标签的class上添加row
,将左右padding设为0即可,这样会去掉表格的默认padding。最终效果和解析如下:
文章图片
总结 到此这篇关于BootStrap栅格之间留空隙的解决方法的文章就介绍到这了,更多相关BootStrap栅格留空隙内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 闲杂“细雨”
- 对手戏
- 吸引力,一种奖赏
- cocosbcx白皮书解读(一)|cocosbcx白皮书解读(一)| 区块链如何统一开发者、发行商、用户之间的利益
- 这个世界哪有那么多的美好,全他妈都是人与人之间的尔虞我诈
- 异性之间,女人期待你主动追求,她会有三种小动作
- 《一念之间》
- 浏览器标准模式和怪异模式之间的区别是什么?
- 在福德与开悟之间,还藏着一个公开的大秘密……
- 人与人之间的等价交换