Laravel 8 使用paginate分页后前端渲染异常如何解决？

问题原因 #

该问题不属于Laravel核心配置错误，绝大多数场景是项目未引入Laravel分页默认依赖的CSS框架导致的显示异常：

• Laravel 7及更早版本默认分页生成的是Bootstrap风格的类名
• Laravel 8及之后版本默认分页生成的是Tailwind CSS风格的类名
  如果你的项目没有引入对应前端框架的CSS文件，原生HTML的a、li标签没有样式修饰，就会出现堆叠、无排版的异常显示效果。

修复方案 #

方案1：切换分页默认样式适配现有前端框架 #

如果你的项目已经引入了Bootstrap，只需要修改Laravel分页的默认驱动即可：
在app/Providers/AppServiceProvider.php的boot()方法中加入以下代码：

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::useBootstrap();
}

修改后{{ $suspendeds->links() }}生成的DOM就会适配Bootstrap的分页类，引入Bootstrap CSS后即可正常显示。

如果你的项目用Tailwind CSS，需要确认两个配置：

1. 项目已正确引入Tailwind CSS全局样式
2. tailwind.config.js的content数组中已加入Blade模板的扫描路径，避免分页样式被摇树优化删除：

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  // 其余配置保持不变
}

方案2：自定义CSS修复（无需引入大体积前端框架） #

Laravel分页生成的DOM对应类名如下，直接将以下CSS加入你的全局样式文件即可修复：

/* 分页容器 */
.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    gap: 4px;
    margin: 16px 0;
}
/* 分页项 */
.page-item {
    border-radius: 4px;
}
/* 分页链接 */
.page-link {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    border: 1px solid #dee2e6;
    color: #0d6efd;
    border-radius: 4px;
}
/* 激活状态 */
.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
/* 禁用状态 */
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}
/* hover效果 */
.page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #0a58ca;
}

方案3：自定义分页模板 #

如果需要完全自定义分页的结构，可以执行命令导出Laravel默认的分页模板自行修改：

php artisan vendor:publish --tag=laravel-pagination

导出的模板会存放在resources/views/vendor/pagination目录，你可以修改对应模板的DOM结构、类名适配自己的项目样式。

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