html - 如何让 Bootstrap 4 卡片不一直向右拉伸(stretch)

Question

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

因此，如果用户有 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>