html - Bootstrap 4.0 卡片图片大小不一样

Question

我正在尝试使我的 bootstrap 4 张卡片图像大小相同。图片本身大小不一样。

<div class="container">
    <div class="row">

    </div>

    <!-- card 2-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/boot.png" alt="bootstrap" class="card-img-top " 
            style="width: 100%; height: 100%;">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p>hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>

    <!-- card 3-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/css.png" alt="HTML" class="card-img-top ">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p> hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>
</div>

图像的代码相同，但仍然不起作用。卡片的文字相同，但图像尺寸不同，因此，卡片的尺寸并不相同。我可以做些什么来尝试解决这个问题？

Answer 1

card-img-top 类已经使图像扩展以使用卡片中的完整尺寸；如果所有卡片的宽度都相同，则不会有任何问题；也就是说，如果您使用 Bootstrap 文档中定义的相同标记结构。

这里我使用了多种尺寸的图像，你可以看到所有卡片图像显示相同；也许这可以帮助你一点

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>


  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/100" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

这也是使用您提供的代码的相同示例，我只是确保您的列包含在 .row div 中；请记住，这在 Bootstrap 中是必需的。您还可以删除 style 属性，您不应该使用它来改变类已经应用的样式。

我也不知道card-block 应该是什么；在任何情况下，Bootstrap 都有 .card-body 类，它应该保存卡片的内容

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

<div class="row">
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/100" alt="bootstrap" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>

  <!-- card 3-->
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/150" alt="HTML" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>
</div>

</div>