Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?