css 如何使卡引导相同的高度与不同数量的文字?

ryoqjall  于 2023-02-26  发布在  其他
关注(0)|答案(1)|浏览(116)

我试着:

  • 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>
kh212irz

kh212irz1#

这将取决于您使用的 Bootstrap 的版本。B4曾经使用一个周围的......。B5已经放弃了.card-deck而支持它们的网格。将您的卡片 Package 在列类中,并添加一个父.row-cols-* 容器来重新创建卡片组(但对响应对齐有更多的控制)。如果您不希望每个卡片组之间有间距,您可以使用卡片组周围的类。 www.example.com

相关问题