BootStrapでcolの要素の間にmarginをつけると開業される減少を防ぎたい

Question

こんにちは
BootStrapを使ってレスポンシブデザインをしています
colで指定した各要素にmarginをつけると改行されてしまいます
col-4を指定しているのですが画像の用になります

画面を広げてみてもずっと2つずつの表示になります
どうすれば改行せずしっかりcol-4の状態を保てますか？

<div class='row'>
    <% @users.each do |user| %>
        <div class='userCard col-sm-4'>
            <div>
                <% if user.avatar? %>
                    <%= image_tag user.avatar.url %>
                <% else %>
                    <img src="/assets/default.png" class="icon" alt="ユーザーアイコン" %>
                <% end %>
            </div>
            <div>
                <%= link_to user_path(user) do %>
                    <%= user.username %>
                <% end %>
            </div>
        </div>
       
    <% end %>

 </div>

.userCard{
    /*width: 250px;*/
    background-color: #fff;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding: 30px;
    margin-top: 20px;
    margin-left: 5px;
    text-align: center;
}

試したこと

colをつけた要素にwidth:250px:のようにをつけると解決するがpx指定はしたくないです

Answer 1

詳しく回答ありがとうございます！
あまり併用しないほうがいいのですね
勉強になりました！

Answer 2

カラム(col)に左右マージンを付けたら、その分幅が広くなりますので、改行してしまいます。
カラムはいじらずに、カラム内の要素をdivで囲んでそれに余白や影をつけることになると思います。

<div class='row'>
    <% @users.each do |user| %>
        <div class='userCard col-sm-4'>
          <div>
             <div>
                <% if user.avatar? %>
                    <%= image_tag user.avatar.url %>
                <% else %>
                    <img src="/assets/default.png" class="icon" alt="ユーザーアイコン" %>
                <% end %>
            </div>
            <div>
                <%= link_to user_path(user) do %>
                    <%= user.username %>
                <% end %>
            </div>
           </div>
        </div>
    <% end %>
 </div>

.userCard{
    /*width: 250px;*/
    margin-top: 20px;
    text-align: center;
}
.userCard > div {
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
}

ちなみに、カラム(col)にすでにpaddingで余白がついているので、特に.userCard > divにマージンをつける必要は特にないとおもいます。

---

あるいは、BootStrapのシャドウを使えば独自CSSは不要になります。

Shadows(シャドウ) · Bootstrap v5.0

<div class='row'>
    <% @users.each do |user| %>
        <div class='userCard col-sm-4'>
          <div class="shadow">
             <div>
                <% if user.avatar? %>
                    <%= image_tag user.avatar.url %>
                <% else %>
                    <img src="/assets/default.png" class="icon" alt="ユーザーアイコン" %>
                <% end %>
            </div>
            <div>
                <%= link_to user_path(user) do %>
                    <%= user.username %>
                <% end %>
            </div>
           </div>
        </div>
    <% end %>
 </div>

BootStrapで独自CSSを使うと、BootStrapのCSS設定とぶつかってレイアウト等に悪影響を与えたり、デザインの統一性がなくなったりするので、その辺は慎重にしたほうがいいでしょう。