Bootstrap 4 - 中间只有两张卡（不是三张，只有两张）

Question

我正在尝试使用card-columnsBootstrap 4 中的类来创建动态页面，这些页面有时可能包含两个到多达 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>

非常感谢帮助。

Answer 1

当我将 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/