引导列之间的间距

Question

所以我正在获取“盒子”并使用ngFor 将它们动态添加到 HTML 文档中。我不知道他们中有多少人会在那里。目前我正在使用此代码：

<div *ngIf="items && items.length" class="row">
    <div *ngFor="let item of items"
         class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
        <app-single-item [item]="item"></app-single-item>
    </div>
</div>

这给了我什么：

这没关系，但问题是我希望这些元素之间的间距更大。它应该是这样的：

为了实现第二张图片的外观，我将width: 21% 放入col-xl-3 并将display: flex 和justify-content: between 添加到row div。

但问题是，现在如果我连续少于 4 个盒子，它们之间的间距会大得多。您可以在下面的图片中看到它

我的问题是，无论数量如何，我如何才能在框之间获得相同的间距。我不想在项目divs 上使用固定宽度，这就是我使用cols 的原因。这很重要，我需要这些项目始终从外部 div 的开头显示，以便与上面的元素保持一致。谢谢。

Answer 1

您可以简单地为每一列使用margin 的右类bootstrap，这样它似乎就可以像这样从右列中获得一些余量

<div *ngIf="items && items.length" class="row">
  <div *ngFor="let item of items"
     class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 mr-3">
     <app-single-item [item]="item"></app-single-item>
  </div>
</div>

Answer 2

保持宽度并使用 justify-content-center

根据评论编辑-

将容器类应用到外部 div 并使用 -

@include media-breakpoint-down(lg) {
.container {
    width: 100%;
    max-width: none;
}

}

Answer 3

您应该更新padding，而不是更新元素的margin 或width，因为它不会影响外部元素而是inner 元素。

代码示例（未测试）

<div *ngIf="items && items.length" class="row">
  <div *ngFor="let item of items"
     class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 pr-2 pl-2">
     <app-single-item [item]="item"></app-single-item>
  </div>
</div>

然后根据这些原则，您可以选择元素之间所需的空间。
另外，也许您不希望第一个和最后一个元素具有left 和rightpadding，因此您可以使用media-queries breakpoints 来remove pl-2 从第一个元素和每个@987654330例如，sm 断点的 @ 元素，第二个元素的 pr-2 和 sm 断点的每个 2n+1 元素，（以及其他断点的其他数学，取决于按行显示的元素数量） .

See the doc