Laravelでpaginateした時の矢印がやたら大きくなる原因

ページネーションのレイアウトが崩れる

Laravelで下図のようにページネーションのレイアウトがなんだかおかしくなる事があります。

原因

レイアウトが崩れる原因はLaravelのページネーションがデフォルトでTailwind互換になっているからです。

デフォルトでは、ペジネータによって生成されたHTMLはTailwind CSSフレームワークと互換性があります。ただし、Bootstrapペジネーションのサポートも利用できます。

Laravel 8.x Database:ペジネーション

Bootstrapを使う

以下をAppServiceProviderに追記することで解消します。

use Illuminate\Pagination\Paginator;

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

もしくはページネーションの記述を以下のように修正します。

{{ $users->links('pagination::bootstrap-4') }}

参考:Laravel 8.x Database:ペジネーション

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)