html - Bootstrap 4：对齐动态添加的列

Question

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

结果：网格工作正常并按预期重新排列列。但是，我认为内槽的排水沟增加了两次。请参阅所附图片。

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

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

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

score 0 · Accepted Answer

另一种方法是在容器的两侧添加一个填充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>

score 0 · Accepted Answer

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

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

首先，您要制作.items为 flexbox，显示为可折叠的行：

@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, etc 类。您可以通过设置.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 之间的间距的时候了。事实上，如果你在 each 上添加填充，.item它们中的 2 个之间的间距将加倍。但是您可以通过在其父 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 上添加 1rem 填充.items，并在每个上添加 1rem 填充.item。这将构成每个项目周围的总共 2rem 填充。

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

html - Bootstrap 4：对齐动态添加的列

2 回答 2

Related

Reference