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

  • Z时代
  • 2024-01-10
  • 分类：问答

不幸的是，似乎没有一种好方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。涉及表单时似乎确实有解决方案，但这不是这里的情况。我已经尝试过此解决方案，但是当有多个列排成一行时，它不起作用。

为了说明我的情况，这是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>

在中等设备大小（md）及以上的情况下，我希望在列的两个“行”之间存在间距，但在3列的“第一行”之上不存在间距，而在列的“第二行”之下不存在间距3列。当这些列垂直堆叠在中型设备尺寸（md）以下时，我希望每列之间都留有间距，但第一个子级以上没有间距，最后一个子级以下没有间距。

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

回答：

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

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

以上是 在Bootstrap 4中垂直堆叠的列之间增加间距 的全部内容， 来源链接： utcz.com/qa/418240.html

回到顶部