Question

因此，基本上，在使用Django和bootstrap 4.4创建一个简单的网站时，我想到了这个问题。我正在使用“卡片”以网格格式（如在书店的Web应用程序中）添加书籍的图像。但是卡的尺寸不相等。如何在引导程序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>

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

1 个答案: