Bootstrap 4：对齐动态添加的列

Question

我正在尝试使用 bootstrap 4 网格。 cols 的数量在数量上有所不同，并且是动态添加的。这会导致在一行中添加超过 12 个列（这并不理想 - 但不确定在动态添加列时如何处理这种情况）。

结果：网格工作正常并按预期重新排列列。但是，我认为内部 cols 的排水沟被添加了 两次。参考附图。

我搜索了文档，使用了 justify-space-between/around - 但没有运气

https://jsfiddle.net/8L3dt1xh/1/

<div class="row">
  <div class="col-lg-2 col-md-3 col-sm-4 col-6"> .. image .. </div>
  <div class="col-lg-2 col-md-3 col-sm-4 col-6"> .. image .. </div>
  ... many such divs .. 
  <div class="col-lg-2 col-md-3 col-sm-4 col-6"> .. image .. </div>
  <div class="col-lg-2 col-md-3 col-sm-4 col-6"> .. image .. </div>
</div>

任何关于如何在列之间获得统一间距的指针都会有很大帮助。

Answer 1

另一种方法是在容器的两侧添加填充 15px，这将在所有行中提供一致的结果，无论有多少项

.row {
  padding: 0 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<section class="">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
      <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <a href="/">
          <figure class="figure">
            <img src="https://via.placeholder.com/850X150?text=X" style="height:150px" class="img-fluid rounded" alt="dummy">
            <figcaption class="figure-caption text-center">Check</figcaption>
          </figure>
        </a>
      </div>
    </div>
  </div>
</section>

Answer 2

我个人会自己构建一个 flexbox，而不是使用 Bootstrap 的 Grid 系统，因为这样我可以在项目上添加自己的填充并计算它们之间的统一间距。

<section class="items">
    <a href="#" class="item">
        <figure />
    </a>
    <a href="#" class="item">
        <figure />
    </a>
    ...
</section>

首先，您要将.items 设置为弹性框，显示为可折叠的行：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

.items {
    display: flex;
    flex-flow: row wrap;
}

我在这里使用的是 SASS，但你可以在演示中看到生成的 CSS。

我还看到你在每一列都有.col-6、.col-sm-4 等类。您可以通过在每个断点上设置 .item 的宽度来复制它：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

.items {
    display: flex;
    flex-flow: row wrap;

    .item {
        width: calc(100%/2);        // 2 per row 

        @include media-breakpoint-up(sm) {
            width: calc(100%/3);    // 3 per row
        }

        @include media-breakpoint-up(md) {
            width: calc(100%/4);    // 4 per row
        }

        @include media-breakpoint-up(lg) {
            width: calc(100%/6);    // 6 per row
        }
    }
}

现在是时候计算两个.items 之间的间距了。实际上，如果您在每个 .item 上添加填充，它们之间的间距将加倍。但是您可以通过在其父 flexbox .items 上添加一半的装订线/间距来轻松适应这种情况。

如果你使用 SASS 会更容易，因为你可以为你想要的装订线间距声明一个变量，你可以根据它进行计算：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$items-gutter: 2rem;

.items {
    display: flex;
    flex-flow: row wrap;
    padding: $items-gutter/2;

    .item {
        padding: $items-gutter/2;
        width: calc(100%/2);        // 2 per row 

        @include media-breakpoint-up(sm) {
            width: calc(100%/3);    // 3 per row
        }

        @include media-breakpoint-up(md) {
            width: calc(100%/4);    // 4 per row
        }

        @include media-breakpoint-up(lg) {
            width: calc(100%/6);    // 6 per row
        }
    }
}

这将在 flexbox .items 上添加 1rem 填充，并在每个 .item 上添加 1rem 填充。这将构成每个项目周围总共 2rem 填充。

演示： https://jsfiddle.net/davidliang2008/rv0knh8b/15/