Laravel5.5 升级 Bootstrap 4 分页样式问题

最近项目中使用 Laravel5.5 版本,然后我升级 bootstrap 为4.0 的版本,然后就遇到了一个问题。分页样式乱套了。

先看 使用 laravel $paginator->links() 生成分页的样式

<ul class="pagination">
    <li class="disabled">
        <span>«</span>
    </li>
    <li class="active">
        <span>1</span>
    </li> 
    <li>
        <a href="http://laravelcode.test?page=2">2</a>
    </li> 
    <li>
        <a href="http://laravelcode.test?page=2" rel="next">»</a>
    </li>
</ul>

然后我们再看 bootstrap 4.0 的分页样式

<ul class="pagination">
    <li class="page-item disabled">
        <span class="page-link">«</span>
    </li>
    <li class="page-item active">
        <span class="page-link">1</span>
    </li> 
    <li class="page-item">
        <a href="http://laravelcode.test?page=2" class="page-link">2</a>
    </li> 
    <li class="page-item">
        <a href="http://laravelcode.test?page=2" rel="next" class="page-link">»</a>
    </li>
</ul>

对比两个样式,其实 “罪魁祸首” 就是 b4 为 li>a 添加了一个page-link 的 class

所以搜索了一番,解决办法如下:

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

blade 模板中使用分页:

{!! $paginator->links('vendor.pagination.bootstrap-4') !!}

接着,就没问题了。

其实,我是搬运工: 搜索链接在此 Laravel整合Bootstrap 4的完整方案(推荐)

我把链接标题改成文章标题了,因为,作者还介绍了如何升级 b4。 clap: :clap: :clap:

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 15

laravel5.5已经预设了bs4了。。

5年前 评论

@doobi ? 5.5 没有吧?

5年前 评论

@doobi 是的,我就是按照 这个改的

5年前 评论
DaZhi

@hedeqiang 您的头像是什么生成的

5年前 评论

@DaZhi 什么头像?就LC 这个我的头像吗?

5年前 评论
DaZhi

@hedeqiang 对就是您这个LC的头像 是脸萌吗

5年前 评论

@DaZhi 好像百度随便找的 :joy: :joy:

5年前 评论
DaZhi

@hedeqiang 好的 谢谢啦。

5年前 评论
DaZhi

就是想用用这个头像。看着很多人用 但是不知道是什么做的

5年前 评论

@DaZhi what ?有很多人在用啊?

5年前 评论
DaZhi

@hedeqiang 对啊。我朋友圈很多人用😂

5年前 评论

@DaZhi 撞脸了,那天换一个

5年前 评论
DaZhi

@hedeqiang 哈哈哈。还没撞脸呢。

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!