我正在使用JSTL的forEach通过引导卡填充轮播。 问题是,这些卡片本应水平放置在轮播中,实际上发生的是仅创建了一个[carousal item],并且其中垂直放置了多张卡片。
这是代码: 注意:请不要担心“主动”轮播项目。
<div class="top-content">
<div class="container-fluid">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<c:forEach var="laptop" items="${laptops}">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card mb-2">
<img class="card-img-top" src="{laptop.picture}">
<div class="card-body">
<h4 class="card-title">{laptop.itemTitle}</h4>
<p class="card-text">Information about the item.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</c:forEach>
</div>
<!-- The rest is the next and the previous buttons -->