引导列之间的间距

Posted 2023-03-06

【中文标题】引导列之间的间距

【英文标题】：Spacing between bootstrap columns

【发布时间】：2021-03-19 02:28:18

【问题描述】：

所以我正在获取“盒子”并使用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 的开头显示，以便与上面的元素保持一致。谢谢。

【参考方案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>

【讨论】：

但是这种方法的问题是它会将最后一个框推到新行中

另一方面，如果我删除了 justify-content-between 并保持 21% 的宽度并增加了边距，它看起来确实更好，但我希望这些框跨越到两个外部 div 边缘如果 4项目存在。

【参考方案2】：

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

根据评论编辑-

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

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

【讨论】：

它不会从外部div的开头开始

我仍然没有得到想要的结果，但有可能我误解了你。您能否分享您的 html 以确保我们保持相同的类？

【参考方案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

【讨论】：

我实际上设法让它与保证金一起工作。我为 col div 保留了 21% 的大小，并在除第 4 个孩子之外的每个 div 上放置了 margin-right。这样我就有了适用于 xl 分辨率的干净解决方案。