BootStrap栅格之间留空隙的解决方法
BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙，这样做真的的可以吗？
【看个例子】：
css样式：
.row div {
height: 100px;
}
html代码：
<div class="container"> <!-- 行元素 --> <div class="row"> <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 --> <div class="col-lg-5"style="background-color: wheat;"></div> <div class="col-lg-4"style="background-color: pink;"></div> <div class="col-lg-3"style="background-color: black;"></div> </div> </div>
【原效果如下】：
现在我们想让这三个部分之间相隔一段距离（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; // 去掉默认的左padding
padding-right: 10px;
height: 100px;
}
.hezi {
width: 100%;
background-color: green;
}
html代码：
<div class="container"> <!-- 行元素 --> <div class="row"> <!-- 第一部分 --> <div class="col-md-5"style="background-color: ;"> <div class="hezi"></div> </div> <!-- 第二部分 --> <div class="col-md-4"style="background-color: ;"> <div class="hezi"></div> </div> <!-- 第三部分 --> <div class="col-md-3"style="background-color: ;"> <div class="hezi"></div> </div> </div> </div>
注：BootStrap的栅格系统对于响应式的网页开发非常方便，在使用栅格系统的时候可以非常方便的时候row和col--来控制布局。但是col--默认会带15像素的左右padding,这个会比较困扰。解决方案可以在内部标签的class上添加row，将左右padding设为0即可，这样会去掉表格的默认padding。
最终效果和解析如下：
总结
到此这篇关于BootStrap栅格之间留空隙的解决方法的文章就介绍到这了,更多相关BootStrap栅格留空隙内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧2016-05-05
这篇文章主要为大家详细介绍了利用js编写网页进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
小程序能够在不同的页面进行跳转切换,路由起到了至关重要的作用,下面这篇文章主要给大家介绍了关于微信小程序如何在页面跳转时进行页面导航的相关资料,需要的朋友可以参考下2022-09-09
在WEB开发中，javascript提供了许多函数供开发人员使用，这些函数在Ajax流行前足够了，但要构建一个交互性强些的应用恐怕就麻烦了。2009-10-10
本文给大家介绍的是javascript中的静态属性和原型属性，并附上示例分析，十分的实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要为大家详细介绍了JS实现五星好评效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12![javascript[js]获取url参数的代码](//img.jbzj.com/images/xgimg/bcimg7.png)
多浏览器兼容用javascript获取url参数的方法比较推荐的一种2007-10-10
这篇文章主要介绍了javascript二维数组和对象的深拷贝与浅拷贝,结合实例形式分析了JavaScript针对数组与对象的深拷贝及浅拷贝相关操作技巧,需要的朋友可以参考下2019-10-10
浅谈javascript中的prototype和__proto__的理解
这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
![javascript[js]获取url参数的代码](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论