css - Bootstrap 4 - 中间只有两张卡(不是三张，只有两张)

我正在尝试使用 Bootstrap 4 中的 card-columns 类来创建动态页面，这些页面有时可能包含两个到多达 8 个不同的卡片。

现在，我的问题很简单:我试图在我的卡片上使用类似 justify-content-around 类的东西，这样，如果只有两张卡片，它们会在彼此相邻的页面上居中。现在他们留在左边，他们不会从左边移动。

我只是在页面上并排地寻找两张卡片。

<div class="container">
<div class="card-columns">
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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>
    </div>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with shorter text.</p>
    </div>
  </div>
</div>
</div>

非常感谢帮助。

最佳答案

当我将 d-flex justify-content-center 添加到您的卡片列时，我得到了您所描述的行为:

<div class="container">
  <div class="card-columns d-flex justify-content-center">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <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>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with shorter text.</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/3y8ks4em/1/

关于css - Bootstrap 4 - 中间只有两张卡(不是三张，只有两张)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43461718/