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

Question

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

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

我只是想在页面上并排查找两张卡片。

<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

您可以简单地将两张卡片放在一个容器内并使用网格属性 (6-6) 排成一行：

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

<div class="container">
  <div class="row">
    <div class="col-6">
      <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 class="col-6">
      <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>

</div>

然后您可以为您的容器选择一个宽度并将其居中。

Answer 2

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

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

Bootstrap 4 - Center Just Two Cards (Not Three, Just Two)

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4