如何使用 Bootstrap 4 scss 在 div 之间创建水平边距

Question

我正在尝试学习使用 Bootstrap 和 Sass。我被困在看似简单的事情上，但我无法让它发挥作用。如何在下面的 div 之间创建一个边距？

我尝试在每个 div 中插入 margin-top 或 margin-bottom，但我无法得到我正在寻找的结果。我尝试将 div 包装在容器中并以不同的方式插入行，但毕竟这段时间我不知道该寻找什么了。每次 div 在添加边距后变得更长或更短。由于背景颜色，这些 div 一直相互粘连。我想在它们之间留出空白。

如何调整 scss 来完成这项工作？

html

<div class="container">
    <div class="main_body"><div class="sidebar"></div>
        <div class="main_content">
            <div class="main_items">
                <div class="profileTabs"></div>
                <div class="profileHead"></div>
                <div class="interests"></div>
                <div class="profileLabels"></div>
            </div>
----------------------------------margin-------------------------------
            <div class="item">
                <div class="avatars"></div>
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="avatars"></div>
                <div class="content"></div>
            </div>
        </div>
    </div>
</div>

scss

.container {
  @include make-container();
  .main_body {
    @include make-row();
    .sidebar {
      @include make-col-ready();
      @include make-col(1.8, 12);
      margin-right: 15px;
    }
    .profileTabs {
      @include make-col-ready();
      @include make-col(10, 10);
    }
    .main_content {
      @include make-col-ready();
      @include make-col(10, 12);
      .main_items {
        @include make-row();
        .profileHead {
          @include make-col-ready();
          @include make-col(2, 10);
        }
        .interests {
          @include make-col-ready();
          @include make-col(2, 10);
        }
        .profileLabels {
          @include make-col-ready();
          @include make-col(2, 10);
        }
      }
      .item {
        @include make-row();
        .avatars {
          @include make-col-ready();
          @include make-col(2.2, 10);
        }
        .content {
          @include make-col-ready();
          @include make-col(7.8, 10);
        }
      }
    }
  }
}

Answer 1

你可以使用<hr>。

这可能就是你要找的。​​p>

这是一个例子：jsfiddle