ページネーションが正しく動作しません - will_paginate、bootstrap4

Question

私はRailsの新機能です。私のプロジェクトでwill_paginateを追加しようとしたとき、指示に従って、それに応じて設定を追加しました。最後に、ページ番号が表示されます。

1.）問題は、ページ番号と次ページオプションが表示されているときに、数字間のスペースが含まれていないことです。

2.

）ブートストラップ4でwill_paginateブートストラップを使用する方法はありますか？ bkz私は彼がその宝石のためのサポートをもう提供しないと述べた人を知っているので。

Answer 1

will_paginateブートストラップをブートストラップ4に使用する方法はありますか？ bkz私は彼がその宝石のためのサポートをもう提供しないと述べた人を知っているので。ここで

bootstrap 4will_paginate-bootstrap4

Answer 2

とwill_paginateサポートであるあなたが遭遇している問題は、Ruby/Railsのとは全く関係ありません：それは単にCSSの問題です。 will_paginateは、ページ区切りセクションのスタイリングについて何も想定せず、単純にスタイルのないHTMLタグを出力します。あなたの好みに合わせてスタイルを設定するのはあなたの責任です。あなたが言及したように、ブートストラップで。

will_paginateの代わりにKaminariを使用することをお勧めします。ヘルパーメソッドを使用してすべてのHTMLをレンダリングするのではなく、通常のテンプレートを使用する方が理に適っていると思います。しかし、それは10年以上前からwill_paginateとKaminariを使用した後のちょうど私の意見です。あなたはそれがあなたのブートストラップと思われる数を見ることができるので、

Answer 3

4ここでは、以下のビューをカスタマイズするために、ソースcss for will_paginate

で、あなただけのこれらのページネーションはきれいリンクにするためにCSSスタイルを作成する必要があり、既にサンプルまたはwill_paginateされ働いていますSCSSファイル アプリ/スタイルシート/ will_paginate.scss内の1つのSCSSファイルを作成し、

.digg_pagination { 
    background: #FFFFFF; 
    font-size: 1.2em; 
    cursor: default; 
    /* self-clearing method: */ } 
    .digg_pagination a, .digg_pagination span, .digg_pagination em { 
    padding: 0.2em 0.5em; 
    display: block; 
    float: left; 
    margin-right: 1px; } 
    .digg_pagination .disabled { 
    color: #999999; 
    border: 1px solid #dddddd; } 
    .digg_pagination .current { 
    font-style: normal; 
    font-weight: bold; 
    background: #2e6ab1; 
    color: white; 
    border: 1px solid #2e6ab1; } 
    .digg_pagination a { 
    text-decoration: none; 
    color: #105cb6; 
    border: 1px solid #9aafe5; } 
    .digg_pagination a:hover, .digg_pagination a:focus { 
     color: #000033; 
     border-color: #000033; } 
    .digg_pagination .page_info { 
    background: #2e6ab1; 
    color: white; 
    padding: 0.4em 0.6em; 
    width: 22em; 
    margin-bottom: 0.3em; 
    text-align: center; } 
    .digg_pagination .page_info b { 
     color: #000033; 
     background: #6aa6ed; 
     padding: 0.1em 0.25em; } 
    .digg_pagination:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; } 
    * html .digg_pagination { 
    height: 1%; } 
    *:first-child + html .digg_pagination { 
    overflow: hidden; 
}