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/

Answer 2

您可以简单地将两张卡片放在一个容器内并使用网格属性（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>

然后，您可以为容器选择宽度并使其居中。

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

2 个答案: