【Rails5】Bootstrapのグリッドラインについて

【現状】
現在ウェブアプリケーションを作成しています。

簡単なユーザ一覧を作成していますが、少々デザインが寂しいのでBootstrapを使用しようと思っています。

現在のユーザー一覧がただの箇条書きみたいなので、イメージとしては画像１を感じを考えています。

画像１

Boostrapはtwittter社が作ったフレームワークと聞いてたのでグリッドラインをうまく利用すれば似たようなものが作れると思っていましたが、そううまくいかず困っています。

【困っていること】

たとえば画像２のように横１列に４人ユーザーを表示したければどのようなソースコードになるのでしょう。

画像２

こんな感じのソースコードで色々とためしてみましたが、どれもうまく表示することができませんでした。

railsのeach文を使用して多くのユーザー情報を取り出してグリッドラインを活用するにはどのようにしたらいいでしょうか？

【まとめ】

・そもそも画像１のように表示するのにグリッドラインを使用するので合っているのか？
・合っているならグリッドラインとeach文は併用して扱うことができるのか？

行動規範の内容に同意します

回答1件

ベストアンサー

私も初心者ですので、お力になれる回答かどうかわかりませんが…。

今回の問題は『railsアプリでユーザーを並べて表示するために、bootstrapのグリッドデザインを活用したい』ということですよね？
これを前提に回答させていただきたく思います。

・そもそも画像１のように表示するのにグリッドラインを使用するので合っているのか？

こちらに関してはその認識で問題ないと思います。
bootstrapを使う際にはブロック要素を整列するためにcolによる記述を使っています。
本件も例にもれず、同じやり方が通用するはずです。
ningenさんの記述を見る限り、グリッドデザインに関しては理解されているかと思いますが、不安な点などありましたら、「bootstrap グリッドデザイン」などで検索されると、わかりやすい記事がたくさん出てくると思います。

・合っているならグリッドラインとeach文は併用して扱うことができるのか？

こちらに関してももちろん可能です。
railsのeach文は、objectに入っている各要素を順番に取り出すメソッドですよね。
ですから、<div class="row">の中で順番に取り出してあげればいいと思います。
各要素に対して<div class="col-sm-3">などを付与してあげれば、colの和が12を超えた時点で次の列に移行してくれますから、お考えの処理を実現することができると思います。

参考までに、以下にサンプルコードを記述させていただきます。

…動かなかったらごめんなさい。

<!--html.erbで記述しています。-->
<div class="container">
  <div class="row">
    <%= @foos.each do |foo| %>
      <div class="col-sm-3 col-xs-6">
        <!--表示したい内容を記述します。-->
        <%= foo.bar %>
      </div>
    <% end %>
  </div>
</div>