Rails bootstrap 3カラムレイアウト

現在railsを使ってアプリを作成中です。
レイアウトにbootstrapを使おうと思っています。

イメージとしては新規投稿をして一覧ページで以下のような写真になること期待しています。

画像のリサイズなどは完成しているのですが実際に投稿してみると以下のようにレイアウトが崩れてしまいます。

どうすれば崩れず上の写真の通りのレイアウトができるのか教えていただきたいです。
お手数ですがお願いします。

index.html
1<% provide(:title, "Boards")%>
2<% @boards.each do |board| %>
3      <div class="row">
4        <div class="col-md-4">
5          <div class="card mb-4 shadow-sm">
6            <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
7            <div class="card-body">
8              <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
9              <p ><%= image_tag board.image_url.to_s %> </p>
10              <div class="d-flex justify-content-between align-items-center">
11                <div class="btn-group">
12                  <!-- <button type="button" class="btn btn-sm btn-outline-secondary">View</button> -->
13                  <button type="button" class="btn btn-sm btn-outline-secondary">見る</button>
14                  <!-- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> -->
15                  <button type="button" class="btn btn-sm btn-outline-secondary">編集</button>
16                </div>
17                <!-- <small class="text-muted">9 mins</small> -->
18                <small class="text-muted">9分</small>
19              </div>
20            </div>
21          </div>
22        </div>
23         <% end %>

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

回答1件

ベストアンサー

ドキュメントを見ると下記のような形が基本形になるので、これをベースに調整すると良いかと思います。
（実際には動かしてみないと期待通りになっているかわからないですが・・・）

<div class="row">
<% @boards.each do |board| %>
  <div class="card mb-4 shadow-sm">
    <%= image_tag board.image_url.to_s %>
    <div class="card-body">
      <div class="btn-group">
        <button type="button" class="btn btn-sm btn-outline-secondary">見る</button>
        <button type="button" class="btn btn-sm btn-outline-secondary">編集</button>
      </div>
      <small class="text-muted">9分</small>
    </div>
  </div>
<% end %>
</div>

参考：https://getbootstrap.jp/docs/4.2/components/card/#example

投稿2020/09/11 11:47