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

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

環境

• Ruby2.6.2
• Rails5.2.4
• Bootstrap4

実現したかったこと

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を整えられるように勉強していきたい。