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

Question

不幸的是，似乎没有一种好的方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。似乎确实有一个solution when a form is involved, but that's not the situation here. I've 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/

在 medium-device 大小 (md) 及以上，我希望两个 "rows" 列之间有间距，但在 "first row" 3 列以上没有间距3 列 "second row" 下方的列和 none。当列垂直堆叠在 medium-device 大小 (md) 以下时，我希望每列之间有间距，但 none 在第一个 child 和 none 低于最后 child.

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

Answer 1

使用新的Bootstrap4spacing 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 相同。

Answer 2

请参阅下面的代码段或 jsfiddle

无论您有多少列或行数，它都会起作用

首先（在大屏幕上）所有行都有 margin-bottom 除了最后一行然后在中等屏幕上，行将没有任何边距，除了 last row 中的 last col 外，cols 都将有 margin-bottom

.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>

Answer 3

以下是我完成这项工作的方式：

.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;
   }
}

Answer 4

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

@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;
  }
}

Answer 5

我刚刚和一位同事一起解决了类似的问题。我们的解决方案，仅使用 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>

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

Answer 6

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

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

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

Add spacing between vertically stacked columns in Bootstrap 4

html

css

spacing

twitter-bootstrap-4

bootstrap-4