商品一覧ページを作りたい！

Question

前提・実現したいこと

画像のような商品一覧画面をbootstrapを用いて実装したいと考えています。
bootstrapのカンファレンスのコピーだけだと画像のようにうまく行きのですが、railsを絡めるとなかなかうまく行かないのです。コードの方をみていただいて、おかしな点を指摘お願いします。

見よう見まねで作ってみたのですが画像のように思い通りいきません。

該当のソースコード

<div class="card-deck">

  
　  <div class="card" >
　  <% @posts.each do |post| %>    
      <%= attachment_image_tag post, :post_image, class: "card-img-top"%>
   　   <div class="card-body">
          <h4 class="card-title">
            <%=post.title%>
          </h4>
          <p class="card-text"><%= post.content %></p>
    　  <div class="text-center">
    　  <% if current_user == post.user %>
            <%= link_to "Delete", post, method: :delete, data: { confirm: "You sure?" }, class: 'btn btn-danger btn-sm' %>
        <% end %>
        </div>
　 　　 </div>
　  <%end%>
　  </div>
 </div>
 

試したこと

bootstrapのカンファレンスをみてしたのですがなかなかeach文などがあり実装できません、、、

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

どのような状態が正解か分かりませんが、card-deckを使う場合はrowとcolは不要です。
https://getbootstrap.jp/docs/4.2/components/card/

Comments

[asato2000]

コメントありがとうございます。二つとも抜いてみたのですがうまく行きません、、

[tabuu]

プログラムで出力したHTMLのコードと、サンプルのコードとを見比べてみてください。

Answer 2

まずRails度外視でhtmlだけで作ってみては。
「モック」というものです。

Comments

[asato2000]

bootstrapのカンファレンスのコピーに当てはめてみたのですがうまく行きません、、