Bootstrap、カードのレイアウトが崩れない方法

Question

laravel７でアプリ作成中です。
Bootstrapのcardをforeachで複数個作っています。
カード内の文字数は同じにも関わらず、カードタイトルの下に無駄な余白ができてしまうものがあります。
下の画像の場合、test7の高さに合わせたいです。

これは何が原因になっているのでしょうか。

<div class="container">
　　　<div class="row">
        @foreach ($ladiesitems as $item)
            <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3 mb-3">
                <div class="card">
                    <a href="{{ route('item', [$item->id]) }}">
                        <div class="position-relative">
                            @if (!empty($item->image_file_name))
                                <img class="card-img-top" src="/storage/item-images/{{$item->image_file_name}}">
                            @else
                                <img src="/images/item-image-default.png" class="rounded-circle" style="object-fit: cover; width: 250px; height: 150px;">
                            @endif
                            <div class="position-absolute py-2 px-3" style="left: 0; bottom: 20px; color: white; background-color: rgba(0, 0, 0, 0.70)">
                                <i class="fas fa-yen-sign"></i>
                                <span class="ml-1">{{number_format($item->price)}}</span>
                            </div>
                            @if ($item->isStateBought)
                                <div class="position-absolute py-1 font-weight-bold d-flex justify-content-center align-items-end" style="left: 0; top: 0; color: white; background-color: #EA352C; transform: translate(-50%,-50%) rotate(-45deg); width: 125px; height: 125px; font-size: 20px;">
                                    <span>SOLD</span>
                                </div>
                            @endif
                        </div>
                    </a>
                    <a href="{{ route('item', [$item->id]) }}" style="text-decoration: none; color: black;">
                    <div class="card-body">
                        <h5 class="card-title textOverflow">{{Str::limit($item->name, 16, '...')}}</h5>
                        <form method="POST" action="likeitem" style="width: 80px; height: 25px;">
                        {{ csrf_field() }}
                            @auth
                            @if($like_model->like_exist(Auth::user()->id,$item->id))
                                <p class="favorite-marke">
                                  <a class="js-like-toggle loved" href="" data-itemid="{{ $item->id }}"><i class="fas fa-heart"></i></a>
                                </p>
                            @else
                                <p class="favorite-marke">
                                  <a class="js-like-toggle" href="" data-itemid="{{ $item->id }}"><i class="fas fa-heart"></i></a>
                                </p>
                            @endif​
                            @endauth
                        <input type="hidden" name="item_id" value="{{ $item->id }}">
                    </div>
                </a>
                </div>
            </div>
        @endforeach
    </div>
</div>

Comments

[Lhankor_Mhy]

Bootstrap のバージョンはいくつですか？

[iwatadaigo]

4.6になってます。

[Lhankor_Mhy]

ありがとうございます。
回答は、4.ｘ でも 5.ｘ でも効くことを確認しました。

Answer 1

なんとなく、PHPの問題、という気もするのですが、とりあえずこうしてみるとどうなりますか？

<div class="card h-100">

Comments

[iwatadaigo]

heightを設定したらできました！ありがとうございます。