Bootstrap 4图像卡覆盖卡文本

Question

我正在尝试使用Bootstrap 4中的标题创建3个简单的图像卡，但无论我如何尝试这样做，卡内的图像都会占据整张卡片，覆盖下面的标题。

这些卡应该看起来就像我使用相同的代码，只是把它放在一行。卡文本在那里，但它直接位于图像下方。如何让卡片更长，以便图像保持在顶部并显示下面的文字？

这是Bootstrap的示例卡：

这就是我的样子：

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

<div class="row">
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

在我看来很好。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md">
    <div class="card" style="width: 17rem;">
      <img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>