Question

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

Bootstrap 4.0卡映像的大小不同

1 个答案: