如何使 Bootstrap 4 卡不会一直向右延伸

Question

我想在 html 页面上有一些引导卡。它们的确切数量我不知道也无法预测，因为它取决于数据库中的用户数据。例如，如果用户有 4 个项目，我需要创建 4 张卡片，如果是 10 则需要创建 10 张卡片，依此类推。因此，我使用 jQuery 通过为它们提供 Bootstrap 4 类名称来动态创建这些卡片。问题是引导卡通过为卡片提供相等的宽度和高度来从左侧开始填充空间。

所以，如果用户有 2 个项目，我想创建 2 张卡片，我选择的宽度和高度相同，并且该行上剩下的任何内容都是空白/空

我尝试更改默认卡片宽度，尝试最大宽度、最小宽度。但它没有工作

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  </div>
</div>

这是默认的 Bootstrap 4 结果：

[[卡1][卡2]]

我想要的是：

[ [卡片1] [卡片2] [一直到右边留空] ]

有什么建议吗？谢谢

Answer 1

默认情况下，卡片是容器宽度的 100%。您可以使用 CSS 限制卡片的宽度：

.card-deck .card {
    max-width: 300px;
}

更新：添加了一个可运行的示例。

.card-deck .card {
    max-width: 200px;
}

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
 </div>