thinkphp 的 render('bootstrap') 需确保 html 结构、css 类名、js 依赖三者匹配:bootstrap 3/4/5 对应不同分页结构与样式,须检查 cdn 加载、raw 输出、query 参数保留及自定义驱动继承关系。

ThinkPHP 默认的 render() 方法输出的是 Bootstrap 风格 HTML,但直接调用 render('bootstrap') 并不能保证样式生效——关键在 HTML 结构、CSS 类名、JS 依赖三者是否对齐。
确认 Bootstrap 版本与分页类是否匹配
ThinkPHP 6 的 Bootstrap 分页驱动(位于 vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php)生成的结构是 <ul class="pagination"><li><a>...</a></li></ul>,这对应 Bootstrap 4/5 的标准写法。但如果你项目用的是 Bootstrap 3,它的 .pagination 样式依赖 float:left 和特定边框逻辑,而 TP6 驱动默认不加 pagination-sm 或 pagination-lg 类,会导致尺寸错位。
- Bootstrap 3 项目:需手动在模板中包裹
<nav aria-label="Page navigation">...</nav>,并确保 CSS 已加载(CDN 或本地文件) - Bootstrap 5 项目:注意它移除了
float布局,改用 Flex;TP6 的Bootstrap.php没有主动加justify-content-center等类,需靠外层容器控制对齐 - 检查浏览器开发者工具中
<ul class="pagination"></ul>是否被正确渲染,且无 CSS 被覆盖(比如你项目全局重置了ul的padding或list-style)
render('bootstrap') 不生效的常见原因
调用 $list->render('bootstrap') 后页面只显示纯文本链接,大概率是以下某一项没到位:
- 没引入 Bootstrap CSS:即使用了 CDN,也要确认
<link rel="stylesheet">在之前、且 HTTP 状态码是 200(常见于路径写成/css/bootstrap.min.css但实际放在/static/css/) - Bootstrap JS 不是必须项,但若用了
data-bs-toggle类(如分页联动下拉),没加载 JS 会失效;不过纯分页导航本身只需 CSS -
render()返回的是字符串,模板里必须用{$list|raw}输出,写成{$list}会被自动转义,<ul></ul>变成文字 - ThinkPHP 6.1+ 默认启用「安全输出」,
raw过滤器必须显式声明,不能省略
自定义分页驱动适配非 Bootstrap UI 框架(如 Layui、AmazeUI)
如果前端用的是 Layui 或 AmazeUI,别硬套 render('bootstrap') —— 它们 HTML 结构和 class 名完全不同。正确做法是复制 Bootstrap.php 改写为新驱动:
- 复制
vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php到app/common/paginator/driver/Layui.php - 修改命名空间为
app\common\paginator\driver,类名改为Layui - 重写
getHtml()方法:把<ul class="pagination"></ul>换成 Layui 要求的<div class="layui-box layui-laypage">,链接用 <code><a href="..."></a>而非<li><a></a></li> - 在配置文件
config/pagination.php中设置'type' => 'Layui',或在paginate()参数里传'type' => 'Layui' - 控制器中调用
paginate()时,必须加'query' => request()->param() - 若只想要部分参数(比如排除
page自身),用'query' => array_filter(request()->param(), function($k) { return $k !== 'page'; }, ARRAY_FILTER_USE_KEY) - 前端 JS 动态翻页时(如点击
.pagination a),href 里的完整 URL 已含 query,无需额外拼接;但用 AJAX 请求时,要手动提取当前 URL 的 search 参数并传给后端
注意:自定义驱动必须继承 think\paginator\driver\Bootstrap(或其父类),否则会丢失 $this->currentPage()、$this->lastPage() 等核心方法。
query 参数丢失导致分页链接跳转后搜索条件清空
分页链接默认只带 page 参数,如果列表页有搜索框(如 ?keyword=abc&status=1),不显式传 query 就会丢参数。这不是样式问题,但常被误认为「分页没适配好」。
真正容易被忽略的,是分页 HTML 渲染后,前端框架(比如 Vue 或 Alpine)可能因 DOM 替换导致事件监听丢失——这时候不是样式没适配,而是 JS 初始化逻辑没重跑。











