在 Bootstrap 4 中添加垂直堆叠列之间的间距答案

【问题标题】：Add spacing between vertically stacked columns in Bootstrap 4在 Bootstrap 4 中添加垂直堆叠列之间的间距
【发布时间】：2017-08-29 17:02:21
【问题描述】：

不幸的是，似乎没有一种很好的方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。似乎确实有solution when a form is involved，但这不是这里的情况。我有tried this solution，但是当有多个列在一行中时它不起作用。

为了说明我的场景，这里是我的 HTML 的结构：

<body>

  <div class="container">

    <div class="row">

      <div class="col-md-4">
        col 1
      </div>

      <div class="col-md-4">
        col 2
      </div>

      <div class="col-md-4">
        col 3
      </div>

      <div class="col-md-4">
        col 4
      </div>

      <div class="col-md-4">
        col 5
      </div>

      <div class="col-md-4">
        col 6
      </div>

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

在中型设备尺寸 (md) 及以上时，我希望在两列“行”之间有间距，但在 3 列的“第一行”上方没有间距，在“第二行”下方没有间距行”的 3 列。当列垂直堆叠在中等设备大小 (md) 下方时，我希望每列之间有间距，但第一个子级上方没有，最后一个子级下方没有。

理想情况下，无论行中包含多少列（例如，3、5、6、12），该解决方案都能正常工作。

【问题讨论】：

我认为你做不到。你应该尝试分成2行然后你就可以完成它了
好的，那么我鼓励您提出解决方案......当然看起来像一个

标签： html css bootstrap-4 twitter-bootstrap-4 spacing

【解决方案1】：

在行中使用 Gutter：https://getbootstrap.com/docs/5.0/layout/gutters/

<div class="row gy-2">
  ...
</div>

【讨论】：

【解决方案2】：

我刚刚与一位同事解决了类似的问题。我们的解决方案，仅使用 Bootstrap 4，如下：

  <div class="col-md-4">
    col 1
  </div>

  <div class="d-block d-md-none col-12 py-3"></div>

  <div class="col-md-4">
    col 2
  </div>

对中间 div 使用类“w-100”而不是“col-12”也可以。这里发生的情况是 d-block 使它在超小型设备上显示，而 d-md-none 使它在中等宽度时消失。

【讨论】：

【解决方案3】：

我最终得到了这个解决方案：

@include media-breakpoint-down(xs) {
  [class*="col-sm"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(sm) {
  [class*="col-md"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(md) {
  [class*="col-lg"]:not(:last-child){
    margin-bottom: 15px;
  }
}

【讨论】：

【解决方案4】：

这是我最终完成这项工作的方式：

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

【讨论】：

【解决方案5】：

使用新的 Bootstrap 4 spacing utilities。例如，mb-3 添加了 1rem 的底部边距。
不需要额外的 CSS。

http://www.codeply.com/go/ECnbgvs9Ez

<div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>

间距实用程序具有响应性，因此您可以将它们应用于特定断点（即；mb-0 mb-md-3）

如果您想要 CSS 解决方案，请在相关 3.x 问题中使用 solution explained（它是不依赖于使用表单）：https://jsfiddle.net/zdLy6jb1/2/

/* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}

注意：col-lg-4 在您的标记中是无关紧要的，因为col-lg-4 col-md-4，
与col-md-4 相同。

【讨论】：

【解决方案6】：

参见下面的 sn-p 或 jsfiddle

不管你有多少列或行，它都会起作用

第一个（在大屏幕上）所有行都有margin-bottom，除了最后一个然后在中等屏幕上，行将没有任何边距，并且所有列都将具有边距底部，除了 last col 来自 last row

.row {
	margin-bottom:30px;
}
.row:last-child{
	margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
	.row { 
	margin:0
	}
	.row [class*="col-"]  {
		margin-bottom:30px;
	}
	.row:last-child [class*="col-"]:last-child{
		margin-bottom:0;
	}
}

<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

      <div class="col-md-4 col-lg-4">
        col 1
      </div>

      <div class="col-md-4 col-lg-4">
        col 2
      </div>

      <div class="col-md-4 col-lg-4">
        col 3
      </div>
</div>
<div class="row">
      <div class="col-md-4 col-lg-4">
        col 4
      </div>

      <div class="col-md-4 col-lg-4">
        col 5
      </div>

      <div class="col-md-4 col-lg-4">
        col 6
      </div>

    </div>

  </div>

</body>

【讨论】：