More than 3 years have passed since last update.

RailsのeachにおけるBootstrap4グリッドシステム

Posted at 2020-08-19

Ruby on RailsでWEBアプリケーションの開発中にBootstrapのグリッドシステムがうまく動かないことがあったので備忘録的意味合いもあり投稿します。

#環境

#実現したかったこと
RailsでDBから欲しいデータをすべて取り出しBootstrapのグリッドシステムを利用してきれいに表示させる

#NGパターン

books_controller.rb

def index
  @books = Book.all
end

books/index.html.erb

<% @books.each do |book| %>
  <div class="row">
    <div class="col-md-6">
      <%= book.name %>
    </div>
  </div>
<% end %>

この書き方だとグリッドシステムがうまく動かず表示したい「book.name」が横並びにならずすべて縦に並んで表示されてしまします。

#OKパターン

books_controller.rb

def index
  @books = Book.all
end

books/index.html.erb

<div class="row">
  <% @books.each do |book| %>
    <div class="col-md-6">
      <%= book.name %>
    </div>　
　 <% end %>
</div>

このように.rowをeachの外で記述することによりグリッドシステムがうまく機能します。
#まとめ
Bootstrapは誰にでもかなり優しいCSSフレームワークですが少しの違いでうまく動かなくなることを実感し、プログラミングの厳しさと面白さを改めて実感できました。

今はフロントの部分でBootstrapに頼り切りですがRailsに慣れてきたらBootstrapを使わずにUI/UXを整えられるように勉強していきたい。