我正在使用 glidejs 来制作这个旋转木马。我不知道如何使卡片与最高的卡片具有相同的高度并同时做出响应。(见下文)
我试图设置.glide__slides
为拥有height: 35vh
并使卡片高度为 100%。这使得卡片具有相同的高度,但在较小宽度的屏幕上时底部有一个很大的白色间隙,如下所示
这是我的代码的一部分
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col-lg-2 my-auto">
<h1>Latest Products 2021</h1>
</div>
<div class="col-lg-10 mt-3">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
{% for product in latest_products %}
<li class="glide__slide">
<div class="card px-2 h-100">
<a href="{{ product.get_absolute_url }}">
<img src="{{ product.image.url }}" class="carousel-image" alt="{{ product.name }}">
</a>
<div class="card-body">
<a href="{{ product.get_absolute_url }}" class="text-decoration-none">
<h5 class="card-title">{{ product.name|truncatechars:30 }}</h5>
</a>
<h6 class="card-subtitle mb-2 text-muted">RM {{ product.price }}</h6>
<button class="btn btn-sm btn-success">Add to Cart</button>
</div>
</div>
</li>
{% endfor %}
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left text-dark" data-glide-dir="<"><i class="fas fa-arrow-left"></i></button>
<button class="glide__arrow glide__arrow--right text-dark" data-glide-dir=">"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>