时间戳

首页 > 解决方案 > Bootstrap 4.0 卡片图像大小不一样

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

问题描述

我正在尝试使我的 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>

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

标签： htmlcssbootstrap-4

解决方案

该类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>

这也是使用您提供的代码的相同示例，我只是确保您的列包含在.rowdiv 中；请记住，这是 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>

推荐阅读