css - 如何将两张引导卡并排放置

Question

我想将两张卡片并排放置(水平)，但目前它们是垂直对齐的。也就是说，我想将标题 1 卡片放在标题 2 卡片旁边，即使我使用了一些边距它也只是在同一位置水平移动而不是垂直移动。

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 1</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 2</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

Answer 1

您可以使用 Bootstrap 的网格来实现这一点:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 1</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 2</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
  </div>
</div>