1

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

事件列表.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>

4

1 回答 1

0

我找到了解决方案：

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

于 2020-07-01T14:43:27.970 回答