ブートストラップのカードがうまく適応されない

Question

ブートストラップのカードの大きさと配列をレイアウト良くしたい

ブートストラップを使用し、カードを用いて一覧ページの作成しているのですが、
大きさ指定が適用されず、２列目以降が大きさがバラバラになりレイアウトが悪いので調整したいです。

お力添えよろしくお願いいたします。

該当のソースコード

<div class="row row-cols md-3">
  <% @posts.each do |post| %>
    <div class="col md-3">
      <div class="card h-100">
          <%= attachment_image_tag post, :post_image, class: "card-img-top"%>
          <div class="card-body">
          <h3 class="card-title"><%=post.title%></h3>
          <h5 class="card-subtitle text-primary"><%=post.subject%></h5>
          <h4 class="card-subtitle text-muted"><%=post.teacher_name%></h4>
          <p class="card-text"><%=post.content%></p>
          <div class="text-center">
             <% if current_user == post.user %>
                  <%= link_to "削除", post, method: :delete, data: { confirm: "You sure?" }, class: 'btn btn-danger btn-sm' %>
                  <%= link_to "編集", edit_post_path(post), class: "btn btn-success btn-sm"%>
             <%end%>
          </div>
        </div>
      </div>
    </div>  
  <% end %>
</div>
<%=paginate @posts %>

.pagination {
  justify-content: center;
}

/* posts/index*/
.row row-cols-md-3 {
    text-overflow: ellipsis;
    margin: 20px 0px 0px 0px;
}
 
.card-text {
    width: 220px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

Comments

[m.ts10806]

row-cols-md-3
という名前が振られた要素はどこにもないですがどこに対する指定でしょうか。
クラスであれば頭に
.
をつけないとクラスに対する指定にならないですが、それでもそのクラスが指定された要素はどこにもありません。

[yumaaaa]

ご回答ありがとうございます。
row-cols-md-3が全体のどこに指定されているかは不明ですが、
これを消すとレイアウトがさらに崩れてしましました。

Answer 1

こんばんは。

colを使っているのが原因では？

任意の数のないクラスを追加し,すべての列が同じ幅になるようにします。

Equal-width | Grid system - Bootstrap 4.4 - 日本語リファレンス

なんとなくですが、col md-3はcol-md-3の間違いなのではないかな、と感じています。
（row-cols md-3も同様）

Comments

[yumaaaa]

ご回答ありがとうございます！
まさにおっしゃる通りでした！

本当に助かりました。