我想用引导卡创建一个循环答案

【问题标题】：i want to create a loop with bootstrap card我想用引导卡创建一个循环
【发布时间】：2020-06-29 16:09:51
【问题描述】：

我在查看页面时遇到问题。每次在我的页面上创建“事件”时，我都希望卡片并排放置，每行最多两个/三个“卡片”。而现在它们被放置在另一个之下。如何创建一个循环，为我分配每行的最大卡值。或者我可以用css解决吗？

eventList.jsp

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="All" role="tabpanel"
            aria-labelledby="home-tab">
            <c:if test="${allList.size() == 0}" var="event" scope="session">
                <h4 class="text-center py-3 empty-events">
                    <i class="far fa-folder-open"></i> No event
                </h4>
            </c:if>
            <div class="col-md-5">
                <c:forEach var="event" items="${allList}">
                    <br>
                    <div class="card">
                        <img class="card-img-top img-fluid"
                            src="resources/img/all.jpg" alt="">
                        <div class="card-body">
                            <h4 class="card-title text-center">${event.title}</h4>
                            <hr>
                            <h5 class="card-title">${event.description}</h5>
                            <p class="card-text">
                                <b><i class="far fa-calendar-alt"></i> Date: ${event.date}</b>
                            </p>
                            <p class="card-text">
                                <b><i class="fas fa-male"></i> Manager:
                                    ${event.username}</b>
                            </p>
                        </div>
                        <div class="col text-center">
                        <a href="eventDetails?id=${event.id}" class="btn btn-danger"><i
                            class="fas fa-external-link-alt"></i> Open</a>
                        </div>
                        <br>
                    </div>
                </c:forEach>
            </div>
        </div>
  ........
 </div>

【问题讨论】：

看看你的用例是否与此相同。这是一种想法，不是确切的解决方案stackoverflow.com/questions/62371077/…
添加一些 count 变量以保持添加卡的计数，如果添加 2 或 3 卡，则从 1 开始计数也使用 <div class ="row">//divide your card according to col-sm-4..etc..</div>
@Swati，是的，我通过添加<div class ="row"> 并首先反转<c:forEach var="event" items="${allList}"> 并在<div class="col-md-4"> 之后解决。现在我有三张卡片。
您可以将其添加为答案并接受您自己的答案，以便将来对其他人有所帮助。

标签： html css jsp bootstrap-4 bootstrap-cards

【解决方案1】：

我找到了解决办法：

<div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="All" role="tabpanel"
            aria-labelledby="home-tab">
            <c:if test="${allList.size() == 0}" var="event" scope="session">
                <h4 class="text-center py-3 empty-events">
                    <i class="far fa-folder-open"></i> No event
                </h4>
            </c:if>
        <div class="row">
            <c:forEach var="event" items="${allList}">
                <div class="col-md-4">
                    <br>
                    <div class="card">
                        <img class="card-img-top img-fluid"
                            src="resources/img/all.jpg" alt="">
                        <div class="card-body">
                            <h4 class="card-title text-center">${event.title}</h4>
                            <hr>
                            <h5 class="card-title">${event.description}</h5>
                            <p class="card-text">
                                <b><i class="far fa-calendar-alt"></i> Date:</b> ${event.date}
                            </p>
                            <p class="card-text">
                                <b><i class="fa fa-user"></i> Manager:</b>
                                    ${event.username}
                            </p>
                        </div>
                        <div class="col text-center">
                        <a href="eventDetails?id=${event.id}" class="btn btn-danger"><i
                            class="fas fa-external-link-alt"></i> Open</a>
                        </div>
                        <br>
                    </div>
                </div>
            </c:forEach>
        </div>

【讨论】：