在 Bootstrap 4 中垂直堆叠的列之间添加间距 [英] Add spacing between vertically stacked columns in Bootstrap 4

查看：20
本文介绍了在 Bootstrap 4 中垂直堆叠的列之间添加间距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div class="容器"><div class="row"><div class="col-md-4">第 1 列

<div class="col-md-4">第 2 列

<div class="col-md-4">第 3 列

<div class="col-md-4">第 4 列

<div class="col-md-4">第 5 列

<div class="col-md-4">第 6 列

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

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

理想情况下，无论行中包含多少列(例如 3、5、6、12)，该解决方案都将起作用.

解决方案

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

.row [class*="col-"] {@extend .mb-4;&:last-child {@扩展 .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;}}

Unfortunately, there doesn't seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpoints. There does seem to be a solution when a form is involved, but that's not the situation here. I've tried this solution, but it doesn't work when there are multiple columns that wrap in a row.

To illustrate my scenario, here's the structure of my 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/

At medium-device size (md) and above, I'd like there there to be spacing between the two "rows" of columns, but no spacing above the "first row" of 3 columns and none below the "second row" of 3 columns. When the columns stack vertically at below the medium-device size (md), I'd like there to be spacing between each of the columns, but none above the first child and none below the last child.

Ideally, the solution would work regardless of how many columns (e.g., 3, 5, 6, 12) are contained within the row.

解决方案

Here's how I ended up making this work:

.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 中垂直堆叠的列之间添加间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆