这篇文章主要介绍“Bootstrap列的垂直间距遇到堆叠问题如何解决”，在日常操作中，相信很多人在Bootstrap列的垂直间距遇到堆叠问题如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap列的垂直间距遇到堆叠问题如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
<divclass="row">
<divclass="col-md-4"></div>
<divclass="col-md-4"></div>
<divclass="col-md-4"></div>
</div>
如果平板电脑或手机查看了该布局，则会堆叠所有列，但每列可能会直接触及上一列。
一个简单的解决方案是为每列添加一个底部边距：
[class*="col-"]{
margin-bottom:15px;
}
这适用于某些情况，但在不需要时会增加额外的，不必要的余量。
解决的方法
为了解决这个问题，我们可以创建一个新的css类，它在堆积时将顶部边距应用于列：
.row.row-grid[class*="col-"]+[class*="col-"]{
margin-top:15px;}
@media(min-width:1200px){
.row.row-grid[class*="col-lg-"]+[class*="col-lg-"]{
margin-top:0;
}
}
@media(min-width:992px){
.row.row-grid[class*="col-md-"]+[class*="col-md-"]{
margin-top:0;
}
}
@media(min-width:768px){
.row.row-grid[class*="col-sm-"]+[class*="col-sm-"]{
margin-top:0;
}
}
row-grid类将顶部边距应用到具有前一列的列，媒体查询然后在不需要的时候删除顶部边距。
在相关的说明中，如果要在行之间添加垂直间距，则将此行添加到CSS：
.row-grid+.row-grid{
margin-top:15px;
}
用法
只需将row-grid类添加到要启用垂直列间距的行中即可。
<divclass="rowrow-grid">
<divclass="col-md-4"></div>
<divclass="col-md-4"></div>
<divclass="col-md-4"></div>
</div>
到此，关于“Bootstrap列的垂直间距遇到堆叠问题如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云搜网网站，小编会继续努力为大家带来更多实用的文章！
