如何在引导程序 4.4 中对齐卡片图像，以使所有卡片具有相等的宽度和高度。？

Question

所以基本上在使用 Django 和 bootstrap 4.4 制作一个简单的网站时，我遇到了这个问题。我正在使用“卡片”以网格格式添加书籍图像，就像在书店 Web 应用程序中一样。但卡片的尺寸不相等。 如何在 bootstrap 4.4 中对齐卡片图像，使所有卡片具有相同的宽度和高度，同时保持对窗口大小变化的响应。？？

我在下图中的问题。正如你所看到的，当我添加不同的图像时，卡片的大小也不同，它的大小也会改变。 enter image description here

html

<div class="container">

        <div class="row">
            {% for book in object_list %}
            <div class="col s3">
                <div class="card">
                    <img class="img-fluid" src="{{book.book_image}}" alt="">
                    <div class="card-body">

                    </div>
                </div>
                <p class="text-white">{{book.name}}</p>
            </div>
            {% endfor %}
        </div>
    </div>

和.css

body{
background: white url('images/webbg.jpg') no-repeat center center;
background-size: cover;
}

我真正想要的图片示例enter image description here 我想要与上图中的完全一样，循环从我的数据库中加载图像。（所以不是嵌入在 html 代码中的硬编码图像链接）

Answer 1

听起来您可以使用.card-deck 来实现您的目标

https://getbootstrap.com/docs/4.4/components/card/#card-decks

如果.card-deck 不适合您，您可以使用新的Grid Cards。它们允许您根据屏幕大小选择每行需要多少张卡片。不会自动将自己设置为相同的高度，但是可以通过在卡片中添加 .h-100 来轻松解决。

例如，如果您希望在xl 断点之后每行有 4 张卡片，在 md 之后有 3 张卡片，在移动设备上需要 2 张卡片，您可以编写以下代码。请注意，列上有一些边距，以便在它们换行时给它们一些空间。

<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4">
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <!-- content -->
    </div>
  </div>
</div>