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

这可能是您正在寻找的。

以下是一个例子：jsfiddle

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

1 个答案: