css - Bootstrap 4 - 中心只有两张牌(不是三张，只有两张)

Question

我正在尝试使用 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>

非常感谢您的帮助。

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/