如何使Laravel分页链接采用Bootstrap 4默认分页样式？

我使用Laravel默认分页代码{{$posts->links()}}，分页功能正常，链接可正常跳转，但未应用Bootstrap 4的默认样式。我当前使用Bootstrap 4，且views/vendor/pagination目录下存在bootstrap4-blade.php、default.blade.php等分页视图文件。生成的HTML代码如下：

<ul class="pagination"> <li class="disabled"><span>芦</span></li> <li class="active"><span>1</span></li> <li><a href="http://proj.test/user/profile?page=2">2</a></li> <li><a href="http://proj.test/user/profile?page=2" rel="next">禄</a></li> </ul>

我的app.css中包含Bootstrap分页相关样式，页面也已加载必要的CSS资源，但分页样式仍不符合Bootstrap 4默认效果，请问原因是什么？

让我来帮你排查一下这个问题，大概率是这几个原因导致的：

1. 未指定使用Bootstrap 4分页视图 #

Laravel默认会调用default.blade.php视图，不会自动识别你存放的Bootstrap 4视图文件。所以哪怕你有对应的文件，不明确指定的话，系统还是会用默认的分页结构。

解决办法分两种：

• 单页面临时指定：直接在调用分页时指定视图路径，代码改成这样：

  {{ $posts->links('vendor.pagination.bootstrap4-blade') }}
  

• 全局默认配置：打开app/Providers/AppServiceProvider.php，在boot()方法里添加以下代码，以后所有分页都会默认使用Bootstrap 4样式：

  use Illuminate\Pagination\Paginator;
  
  public function boot()
  {
      Paginator::useBootstrapFour();
  }
  

  注意：用全局配置的话，建议把视图文件名改成Laravel官方默认的bootstrap-4.blade.php，避免出现文件找不到的问题；如果不想改名，也可以自定义视图路径参数。

2. 分页视图的HTML结构不符合Bootstrap 4要求 #

从你生成的HTML能明显看出来，<li>标签只有disabled或active类，缺少Bootstrap 4分页必须的page-item类，链接也没有page-link类——这完全是默认视图的结构，不是Bootstrap 4的标准结构。

Bootstrap 4分页的正确结构应该是这样的：

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

你可以先检查bootstrap4-blade.php里的代码是否符合这个结构，如果不符合，要么手动修改视图，要么重新发布Laravel官方的Bootstrap 4分页视图：

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

执行这个命令后，会在views/vendor/pagination目录下生成官方标准的bootstrap-4.blade.php文件，结构完全适配Bootstrap 4。

3. 乱码字符附带的显示问题 #

你生成的HTML里出现了“芦”“禄”这类乱码，这是上一页/下一页的图标显示异常，大概率是视图文件里的字体图标引用错误，或者页面字符编码设置有问题。

如果用的是Bootstrap图标，要确保正确引入了图标资源；也可以直接用HTML实体代替图标，比如把上一页改成«，下一页改成»，这样就能避免乱码问题。

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