我试着:
- 将
style="border: 1px solid"
添加到列对象 - 使用
class='container-fluid', add 'd-flex'
逐格换行到行,并将flex-fill
添加到列对象 - 将
d-flex
添加到列对象并将flex-fill
添加到卡对象 - 将
d-flex
添加到列对象并将h-100
添加到卡对象 - 将
AMLqa card
添加到列,将h-100
添加到card
类 - 将
style="display:flex;flex-direction:row;"
添加到类col
- 将
style="display:flex;flex-direction:column;"
添加到card
这些选择都不起作用,经过所有不成功的尝试,我意识到:我只有一个div行,所以列col-lg-3排成三行,列col-md-2排成两行,这两列并不构成一个div行的整体,因为下面还有更多的行,而且列占据了嵌套在其中的卡片的高度。
我该怎么补救呢?
谢谢你的回答!
<div class="container">
<div class="card border-0">
<div class="card-header border-0 bg-transparent">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12">
<h5><strong>Всего: {{ count_products }}</strong></h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 text-start mb-3">
{% include 'catalog/includes/categories_for_products.html' %}
</div>
</div>
</div>
<div class="row align-items-center"> **<--it's about these rows**
{% for object in object_list %}
<div class="col-lg-4 col-md-6 col-sm-12 {% translittag object.category %}">
<div class="card mb-4 box-shadow">
<div class="card-header text-center text-bg-dark">
<a class="prod-white-link" href="{{ object.get_absolute_url }}">
<h4 class="my-0 font-weight-normal">{{ object.product_name|truncatechars:35 }}</h4>
</a>
</div>
<div class="card-body text-bg-warning">
<h2 class="card-title pricing-card-title">$ {{ object.unit_price }}</h2>
<p class="card-text">{% autoescape off %}{{ object.prod_annotation }}...{% endautoescape %}
</p>
<p>Категория: {{ object.category }}
</p>
{# <p>{% getversion object.pk %}</p>#}
</div>
<div class="card-footer text-bg-warning text-center">
<div class="col-12">
<a class="btn btn-primary w-50" href="{{ object.get_absolute_url }}">
<strong>Подробнее</strong>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
1条答案
按热度按时间kh212irz1#
这将取决于您使用的 Bootstrap 的版本。B4曾经使用一个周围的......。B5已经放弃了.card-deck而支持它们的网格。将您的卡片 Package 在列类中,并添加一个父.row-cols-* 容器来重新创建卡片组(但对响应对齐有更多的控制)。如果您不希望每个卡片组之间有间距,您可以使用卡片组周围的类。 www.example.com