Bootstrap列的垂直间距遇到堆叠问题的处理方法
发表时间：2025-09-30 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家介绍的内容是关于Bootstrap列的垂直间距遇到堆叠问题的解决方法，有需要的朋友可以参考一下。
遇到的问题
在使用Twitter Bootstrap时，当bootstrap的列开始堆叠时，我遇到了一些垂直间距问题。例如，让我们看看中型局屏幕的3列布。（推荐教程：Bootstrap教程）
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="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类添加到要启用垂直列间距的行中即可。
<div class="row row-grid">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>以上就是Bootstrap列的垂直间距遇到堆叠问题的解决方法的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
