如何让 Bootstrap 4 张卡片不一直向右伸展

Question

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

因此，如果用户有 2 个项目，我想创建 2 张卡片，我选择的宽度和高度相同，该行剩下的内容为 blank/empty

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

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

这是默认的 Bootstrap4 结果：

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

如何让 Bootstrap 4 张卡片不一直向右伸展

How to make Bootstrap 4 cards NOT to stretch all the way to the right

html

css

bootstrap-4

bootstrap-cards