如何使用Bootstrap 4 SCS在DIV之间创建水平余量

Question

我正在尝试学习使用bootstrap和sass。我陷入了看似简单的东西，但我只是无法正常工作。如何在下面的Divs之间创建边距？

我试图在每个DIV上插入保证金顶或保证底，但我无法获得所需的结果。我试图以不同的方式将Divs包裹在容器中，并插入行，但是毕竟，我不知道该寻找什么。每当div添加边距后，div就会变长或更短。Divs由于其背景颜色而不断地互相粘住。我想在它们之间有空白。

如何调整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>。

这可能是您要寻找的。

这是一个示例：JSFIDDLE