will-paginateのデザインを変えたい。

Question

https://nyoken.com/will_paginate
https://github.com/bootstrap-ruby/will_paginate-bootstrap

↑これらの記事を参考にして、

railsでwill_paginateをwill_paginate-bootstrapでデザインして、
![]

このようなデザインにしたいのですが、

bootstrapが反映されず下のように表示されます。

どうすればbootstrapがきちんと反映されるのでしょうか？
わかる方がいたら教えてください。

gem 'bootstrap-sass'
gem 'will_paginate', '3.1.7'
gem 'will_paginate-bootstrap'

Gemfile.lock↓

bootstrap-sass (3.4.1)
      autoprefixer-rails (>= 5.2.1)
      sassc (>= 2.0.0)

will_paginate (3.1.7)
will_paginate-bootstrap (1.0.2)
     will_paginate (>= 3.0.3)

posts_controller.rb↓

def index
    @posts = Post.order(created_at: :desc).paginate(page: params[:page], per_page: 8)
  end

index.html.erb↓

    <div class="main">
        <div class="main-top">
            <span>新着一覧</span>
            <span class="new"><%= link_to("新規作成", "/posts/new") %></span>
        </div>    
        <div class="lists">
            <% @posts.each do |post| %>
            <div class="img-link">
                <a href="<%= "/posts/#{post.id}" %>" class="thumb-link">
                    <div>
                        <img src="<%= "/images/#{post.image}" %>" class="thumb-img">
                        <div class="thumb-name"><%= post.name %></div>
                    </div>    
                </a>
            </div>    
            <% end %>
        </div>
        <div class="page">　<!-- paginateはここです！ -->
        <%= will_paginate @posts, renderer: BootstrapPagination::Rails %>
        </div>
    </div>

Comments

[yut148]

反映したい状態は横並びにしたいという事でしょうか？
Previous 1 2 Next Label
といった感じでしょうか？

[退会済みユーザー]

質問を追記させていただきました！

[yut148]

確認しました。了解です。あまり詳しくないのですが、どー見てもcss周りな気がします。
後、ページのhtmlソースのcssの部分とwill-paginateのbodyの箇所のソースもわかると回答が得られやすいと思います。

[退会済みユーザー]

will_paginateのbody箇所はindex.html.erbに記載しました。
ちなみに参考記事はこちらです。
https://nyoken.com/will_paginate
https://github.com/bootstrap-ruby/will_paginate-bootstrap

[退会済みユーザー]

んーやっぱり自分でスタイリングするという方向性で行くしかなさそうですね。。
いろんな中にお聞きしたんですがどなたも解決法がわからないっぽいです。。

[yut148]

erbもですが、ページのソースのcssの箇所とhtmlのbodyの箇所があった方がより良いと思います。

Answer 1

自分の場合ですが

<%= will_paginate @rank, previous_label: '&#8592; &nbsp;前', next_label: '次 &#8594;', inner_window: 1, outer_window: 0 %>

とerbに書いて

<div class="pagination"><ul class="pagination"><li class="prev previous_page disabled"><a href="#">&#8592; &nbsp;前</a></li> <li class="active"><a href="/topten?page=1">1</a></li> <li><a rel="next" href="/topten?page=2">2</a></li> <li><a href="/topten?page=3">3</a></li> <li class="next next_page "><a rel="next" href="/topten?page=2">次 &#8594;</a></li></ul></div>

といったhtmlになりました。

<div class="pagination"> 等になりますでしょうか。