如何在JSP中基于HashMap动态生成Bootstrap网格布局

没问题，我来帮你搞定这个JSP动态生成Bootstrap网格的需求！首先得把你的布局规则对应到Bootstrap的网格逻辑上，然后用JSTL来处理HashMap的分组和渲染，一步一步来：

第一步：明确布局对应的Bootstrap列规则 #

根据你的需求，我们可以这样定义列宽度来匹配规则：

• 含2个子项的项目：独占整行，用col-12（占满Bootstrap的12列布局），这样它会自然排在最前面
• 含3个子项的项目：每行放2个，每个用col-6（各占6列，加起来刚好12列），这样4个3子项的项目会排成两行——第一行是Item1、Item2，第二行是Item3、Item4，Item4正好在Item2的正下方，完美符合你的要求

第二步：用JSTL分组处理HashMap #

我们需要先把HashMap里的项目按子项数量分成两组：2子项组和3子项组。这样后续渲染逻辑会更清晰，避免嵌套判断的混乱。

第三步：动态渲染Bootstrap网格 #

先渲染2子项的项目（放在最顶部），再渲染3子项的项目，渲染3子项时要每两个生成一个新的row容器。

完整JSP代码实现

首先确保你的JSP页面已经引入JSTL标签库（如果没引入的话，需要先加这两行）：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

然后是核心渲染代码：

<%-- 1. 分组：将项目按子项数量分到两个集合 --%>
<c:set var="twoChildItems" value="<%= new java.util.ArrayList<>() %>" />
<c:set var="threeChildItems" value="<%= new java.util.ArrayList<>() %>" />

<c:forEach var="entry" items="${yourHashMap}">
    <c:choose>
        <c:when test="${fn:length(entry.value) == 2}">
            <c:set target="${twoChildItems}" property="empty" value="${entry}" />
        </c:when>
        <c:when test="${fn:length(entry.value) == 3}">
            <c:set target="${threeChildItems}" property="empty" value="${entry}" />
        </c:when>
        <%-- 如果有其他子项数量的项目，可在此添加额外分支处理 --%>
    </c:choose>
</c:forEach>

<%-- 2. 渲染2子项的项目（独占一行） --%>
<c:if test="${not empty twoChildItems}">
    <c:forEach var="entry" items="${twoChildItems}">
        <div class="row mb-3">
            <div class="col-12">
                <h5 class="fw-bold">${entry.key}</h5>
                <div class="d-flex justify-content-around mt-2">
                    <c:forEach var="child" items="${entry.value}">
                        <span class="badge bg-primary px-3 py-2">${child}</span>
                    </c:forEach>
                </div>
            </div>
        </div>
    </c:forEach>
</c:if>

<%-- 3. 渲染3子项的项目（每两个一行） --%>
<c:if test="${not empty threeChildItems}">
    <c:forEach var="entry" items="${threeChildItems}" varStatus="status">
        <%-- 每2个项目开启一个新row（第一个项目或偶数索引的起始） --%>
        <c:if test="${status.index % 2 == 0}">
            <div class="row mb-3">
        </c:if>

        <div class="col-6">
            <h5 class="fw-bold">${entry.key}</h5>
            <div class="d-flex justify-content-around mt-2">
                <c:forEach var="child" items="${entry.value}">
                    <span class="badge bg-secondary px-3 py-2">${child}</span>
                </c:forEach>
            </div>
        </div>

        <%-- 每2个项目闭合当前row（最后一个项目或奇数索引的结尾） --%>
        <c:if test="${status.index % 2 == 1 || status.last}">
            </div>
        </c:if>
    </c:forEach>
</c:if>

代码说明

• 分组逻辑：用JSTL的forEach遍历你的HashMap，通过fn:length判断子项集合的大小，将项目分到对应集合
• 2子项渲染：每个项目占col-12，独占一行，放在最顶部
• 3子项渲染：通过varStatus跟踪循环索引，每2个项目生成一个row，每个项目占col-6，保证布局符合你的要求
• 额外美化：用mb-3给每行加底部间距，d-flex justify-content-around让子项均匀分布，fw-bold加粗项目标题，让页面更美观

注意：确保你的页面已经引入了Bootstrap的CSS文件，否则网格布局不会生效哦！

内容的提问来源于stack exchange，提问作者user596502