在控制列数的同时实现引导卡的相等动态宽度和高度[重复]答案

【问题标题】：Achieve equal dynamic width and height of bootstrap cards while controlling number of columns [duplicate]在控制列数的同时实现引导卡的相等动态宽度和高度[重复]
【发布时间】：2019-07-30 22:11:12
【问题描述】：

我正在尝试指定引导卡片组的列数，因为我希望每张卡片的宽度和高度相等。

高度必须根据卡片主体的内容动态变化，就像卡片组提供的一样，并在所有卡片之间提供相等的间距。

我可以使用带有卡片类的 ROW 和 COL-* 指定列数，但是所有卡片之间的高度和间距是基于卡片主体的随机数。 CARD-DECK 类为每张卡片提供了相同的高度和宽度，但我似乎无法控制列数，在这种情况下我希望是两列。

我之前问过这个问题，它通过参考以下问题自动关闭，但我没有看到任何一个成功地解决了当有几行卡片时每张卡片的高度相同。

Bootstrap 4 card-deck with number of columns based on viewport

bootstrap 4 card-deck containing cards with different width

How to limit number of columns of card-deck?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 4</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="card-deck">
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 4</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
    </div>
</div>

【问题讨论】：

实际上它并不能满足我的需要。您的代码每行都有不同的高度。乍一看，它们看起来一样，但它们的行为不像卡片组，每行的每张卡片都具有相同的高度。
卡片组也使用 flexbox，其中每张卡片的高度是该行中最高的，并且卡片组只有 1 行，直到它们在不同高度时垂直堆叠。 “您的代码每行都有不同的高度。” -- 是的，这就是 flexbox 的工作方式，单独的卡片组也不例外……高度由最高的内容控制。你唯一能做的就是设置最小高度。
但这就是问题的重点。单个卡片组控制每张卡片的高度，但不允许您控制列数。为了控制列数，我使用了单个 ROW 和许多 COL，但随后我失去了每一行的卡片组行为。因此，您一直说的问题得到了回答，但我还没有找到。 : (
正确，但牌组中每个“可见”行中的每张牌都具有相同的高度。这就是我想要的。如何获得卡片组行为但限制它使用的最大列数？
如文档中所述，卡片组不响应："For the time being, these layout options are not yet responsive." 因此无法控制宽度。

标签： bootstrap-4

【解决方案1】：

Bootstrap 提供类以使内容跨越元素容器宽度或高度的 25%、50%、75% 或 100%，您可以将类 h-100 添加到卡片中，以便它们使用全部可用的高度，内容越多的列越大，高度越高。

这里的文档：https://getbootstrap.com/docs/4.3/utilities/sizing/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 1</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
            ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 2</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 3</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
            ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

不是真的...每一行都有不同的高度。卡片组为每张卡片的每一行提供相同的高度。
使用 Chrome 开发工具检查它们后，每行的高度相同；你能说明你在哪里看到了不同吗？
当然...我可能做错了，但我将您的代码 sn-p 添加到我的帖子中，并且刚刚从卡 3 中删除了一些文本，说明第二行比第一行短。
哦，是的，我知道你的意思.. 当然那是因为一排的卡片内容较少，所以高度降低了；我会看看能做些什么
正是...卡片组负责处理这一点，但我不知道如何模仿这一点，同时也控制列。我将删除多余的 sn-p 以免混淆任何人。不知道为什么@Zim 一直关闭我的问题 - 哈哈。你能看到他引用的答案在哪里解决了身高问题吗？