如何在bootstrap 4.4中对齐卡片图像，使所有的卡片具有相同的宽度和高度。
如何在bootstrap 4.4中对齐卡片图像，使所有的卡片具有相同的宽度和高度。
提问于 2020-03-24 20:11:25
所以基本上在用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代码中的硬编码图像链接)
回答 1
Stack Overflow用户
发布于 2020-03-24 21:01:17
听起来你可以使用.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60830802
复制相关文章
相似问题
腾讯云开发者
