JSP 页面在行中循环

Question

我做了以下代码

<%ArrayList<Doc> std = 
            (ArrayList<Doc>)request.getAttribute("doclist");
        for(Doc s:std){%>
        
        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><%=s.getId()%></h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    
    
        
        
            <%}%>

我的卡片喜欢
卡片 1
卡片 2
卡片 3
卡片 4
卡片 5

可用数据的数量也是如此

我想让我的卡片每行显示 4 张，例如
卡片1 卡片2 卡片3 卡片4
卡片 5

这怎么可能。我正在从一个 servlet

传递数据

Answer 1

此类工作属于 UI 类别。

您使用以下css供您参考：

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-left: 5em;
        margin-right: 5em;
    }
    .ele {
        border: 1px black solid;
    }

参考这个：https://www.youtube.com/watch?v=68O6eOGAGqA

Answer 2

试试这个

<Div style="display:inline">
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card 2</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card 3</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card 4</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card 5</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</Div>

JSP 页面在行中循环

JSP page for loop in row

java

jsp

servlets