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>

如何将两个引导卡彼此相邻放置

1 个答案: