Laravel中Bootstrap 5移动端自定义分页需求咨询

架构老林

2026-7-8

解决方案

1. 发布Laravel分页视图

先把Laravel默认的Bootstrap分页视图发布到本地目录，方便自定义修改：

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

执行后，分页视图会生成在 resources/views/vendor/pagination/ 目录下，找到其中的 bootstrap-5.blade.php 文件。

2. 自定义分页页码逻辑

打开 bootstrap-5.blade.php，找到原代码中处理页码数组的循环块（@if (is_array($element)) 包裹的部分），替换为以下代码，强制显示1、2、3页码（总页数不足3时自动显示所有现有页码）：

{{-- 自定义显示固定页码：1、2、3 --}}
@php
    $totalPages = $paginator->lastPage();
    // 总页数≥3时显示1、2、3，不足时显示实际页数范围
    $displayPages = $totalPages >= 3 ? [1, 2, 3] : range(1, $totalPages);
@endphp

@foreach ($displayPages as $page)
    @if ($page == $paginator->currentPage())
        <li class="page-item active" aria-current="page">
            <span class="page-link">{{ $page }}</span>
        </li>
    @else
        <li class="page-item">
            <a class="page-link" href="{{ $paginator->url($page) }}">{{ $page }}</a>
        </li>
    @endif
@endforeach

3. 覆盖Bootstrap移动端隐藏样式

Bootstrap默认在移动端（屏幕宽度≤575.98px）会隐藏中间页码，需要在你的自定义CSS文件中添加以下样式，强制显示所有页码：

@media (max-width: 575.98px) {
    .pagination .page-item:not(.disabled) {
        display: inline-block !important;
    }
    /* 可选：调整移动端页码的大小和间距，让布局更紧凑 */
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}