bootstrap 栅格div排布行间距如何调整

发布网友发布时间：2022-04-06 12:13

共4个回答

懂视网时间：2022-04-06 16:35

本篇文章给大家介绍的内容是关于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>

热心网友时间：2022-04-06 13:43

你可以给容器div添加一个类目，自定义间距，又可以自定义主题时候，调整边距，还可以在样式表类名哪里修改。

热心网友时间：2022-04-06 15:01

需要调间距吗,把需要调整的那一行自己顶一个div放在上一层不行吗,间距貌似是统一规定的,或者自定义一个css样式,把原来的覆盖掉,但不要修改源代码,或者定制一套bootstrap试试,那里面好像有设置各种属性的

热心网友时间：2022-04-06 16:35