我想用 bootstrap 卡创建一个循环

Question

我在查看页面时遇到问题。每次我创建一个“事件”时，我都希望在我的页面上将卡片并排放置，每行最多两张/三张“卡片”。而现在它们被一个放在另一个下面。我如何创建一个循环，为每行分配一个最大卡值。或者我可以用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>

Answer 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>

我想用 bootstrap 卡创建一个循环

i want to create a loop with bootstrap card

html

css

jsp

bootstrap-4

bootstrap-cards