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>