https://nyoken.com/will_paginate
https://github.com/bootstrap-ruby/will_paginate-bootstrap
↑これらの記事を参考にして、
railsでwill_paginateをwill_paginate-bootstrapでデザインして、
![]
このようなデザインにしたいのですが、
どうすればbootstrapがきちんと反映されるのでしょうか?
わかる方がいたら教えてください。
Gemfile
1gem 'bootstrap-sass' 2gem 'will_paginate', '3.1.7' 3gem 'will_paginate-bootstrap'
Gemfile.lock↓
Gemfile.lock
1bootstrap-sass (3.4.1) 2 autoprefixer-rails (>= 5.2.1) 3 sassc (>= 2.0.0) 4 5will_paginate (3.1.7) 6will_paginate-bootstrap (1.0.2) 7 will_paginate (>= 3.0.3)
posts_controller.rb↓
posts_controller.rb
1def index 2 @posts = Post.order(created_at: :desc).paginate(page: params[:page], per_page: 8) 3 end
index.html.erb↓
HTML
1 <div class="main"> 2 <div class="main-top"> 3 <span>新着一覧</span> 4 <span class="new"><%= link_to("新規作成", "/posts/new") %></span> 5 </div> 6 <div class="lists"> 7 <% @posts.each do |post| %> 8 <div class="img-link"> 9 <a href="<%= "/posts/#{post.id}" %>" class="thumb-link"> 10 <div> 11 <img src="<%= "/images/#{post.image}" %>" class="thumb-img"> 12 <div class="thumb-name"><%= post.name %></div> 13 </div> 14 </a> 15 </div> 16 <% end %> 17 </div> 18 <div class="page"> <!-- paginateはここです! --> 19 <%= will_paginate @posts, renderer: BootstrapPagination::Rails %> 20 </div> 21 </div>
反映したい状態は横並びにしたいという事でしょうか?
Previous 1 2 Next Label
といった感じでしょうか?
質問を追記させていただきました!
確認しました。了解です。あまり詳しくないのですが、どー見ても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
んーやっぱり自分でスタイリングするという方向性で行くしかなさそうですね。。
いろんな中にお聞きしたんですがどなたも解決法がわからないっぽいです。。
erbもですが、ページのソースのcssの箇所とhtmlのbodyの箇所があった方がより良いと思います。
回答1件
あなたの回答
tips
プレビュー