Grails 2.3.11集成Twitter Bootstrap Plugin 3.3.5分页显示异常求助

我之前维护老Grails项目时刚好碰到过一模一样的问题，核心原因是Bootstrap 3的分页样式要求和Grails默认的g:paginate标签渲染结构不匹配，再加上插件的配置可能没完全生效导致的。下面给你几个靠谱的解决步骤：

1. 确认Config.groovy的分页修复配置是否完整 #

很多人只加了部分配置导致没生效，你需要确保Config.groovy里有这两行：

grails.plugins.twitterbootstrap.fixtaglib = true
grails.plugins.twitterbootstrap.paging.enabled = true

第一行是让插件修复Grails的taglib渲染逻辑，第二行明确开启分页的Bootstrap样式支持。配置完记得重启应用，Grails的Config.groovy修改后需要重启才会生效。

2. 调用g:paginate时强制指定Bootstrap样式类 #

如果配置没起作用，直接在GSP页面调用分页标签时手动指定class="pagination"：

<g:paginate total="${yourRecordCount}" class="pagination" />

Bootstrap 3的分页样式依赖外层<ul>标签的pagination类，这个操作能强制给生成的分页容器加上正确的样式类，直接解决垂直排列的问题。

3. 检查是否有自定义CSS干扰 #

有时候项目里的全局CSS会重置<ul>、<li>的默认样式，导致Bootstrap的分页样式被覆盖。你可以用浏览器开发者工具（F12）查看分页元素的样式，看看pagination类的display: inline-block等核心属性是否被其他CSS覆盖了。如果有，要么调整自定义CSS的优先级，要么给分页元素加更具体的选择器。

4. 手动构建分页结构（终极方案） #

如果上面的方法都不管用，那就直接放弃插件的自动渲染，用Bootstrap的原生分页结构手动写：

<ul class="pagination">
    <!-- 上一页 -->
    <g:if test="${offset > 0}">
        <li>
            <g:link action="index" params="[max: max, offset: offset - max]">
                <span>&laquo;</span>
            </g:link>
        </li>
    </g:if>
    <g:else>
        <li class="disabled">
            <span>&laquo;</span>
        </li>
    </g:else>

    <!-- 页码列表 -->
    <g:each in="${pageRange}" var="pageNum">
        <li class="${pageNum == currentPage ? 'active' : ''}">
            <g:link action="index" params="[max: max, offset: (pageNum - 1) * max]">
                ${pageNum}
            </g:link>
        </li>
    </g:each>

    <!-- 下一页 -->
    <g:if test="${offset + max < total}">
        <li>
            <g:link action="index" params="[max: max, offset: offset + max]">
                <span>&raquo;</span>
            </g:link>
        </li>
    </g:if>
    <g:else>
        <li class="disabled">
            <span>&raquo;</span>
        </li>
    </g:else>
</ul>

这个方案完全手动控制结构，确保和Bootstrap 3的样式要求完美匹配，绝对不会出现垂直排列的问题。

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