Bootstapを使用したカード要素を横並び等間隔にしたい。

Question

前提・実現したいこと

Bootstapを使用したカード要素を横並び等間隔にしたいです。

ここに質問の内容を詳しく書いてください。
現在、railsでSNSのようなアプリケーションを作成中で
投稿を横並び、等間隔にしようと悪戦苦闘しております。
デザインはBootstrpを使用しています。

発生している問題・エラーメッセージ

https://gyazo.com/fe50a059e167a4fa4a61c349452bf6e7
このような状況にあります。

該当のソースコード

<% @posts.each do |post| %>

  <div class="d-flex justify-content-around">
  <div class="card" style="width: 25rem;" >
  <div class="card-body">
  
  
    <%= image_tag post.image, :width => '280', :height => '280'if post.image.attached? %> 
    
    
      <h5 class="card-title"><%= post.title %></h5>
      <p class="card-text"><%= post.body %></p>
    

    <div class="btn-group">
          <button type="button" class="btn btn-sm btn-outline-secondary">
            <%= link_to '詳細', post_path(post.id) , method: :get %></button>
          <button type="button" class="btn btn-sm btn-outline-secondary">
            <%= post.user.name %></button>
    </div>
    
      <p class="card-text">
      <small class="text-muted"><%= post.updated_at %>
      </small>
      </p>

  </div>
  </div>
  </div>
<% end %>

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

自身のCSSで対応しても何故か適応されない状態にあります。
Bootstrapを用いた実装が初めてのためその点についてもご指導いただけると幸いです。

Comments

[Lhankor_Mhy]

似たようなコードの似たようなご質問にお答えしたのですが、何かのスクールの課題とかなんですかね……？
https://teratail.com/questions/308479

[Pro01x19]

返信ありがとうございます！
特にそういった形ではなかったのですが、先ほどの質問者の方のコードを見て解決しました。ありがとうございました！

[Lhankor_Mhy]

ご解決されて何よりです。

自己解決の対応をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

<% @posts.each do |post| %>
を１行目にしていたのを

<div class="row row-cols md-3"> こちらに変更しましたら解決しました。