bootstrap card height-full card-header

Question

​

​

如何对齐组中的卡片？如果我在card-header中安装height-full，整个布局就会崩溃

    <div class="pb-5 row justify-content-center">
        {% for movie in movie_list %}
            <div class="col-md-4 top-bottom">
                <div class="card mb-4 box-shadow">
                    <div class="card-header text-center align-items-center d-flex justify-content-center">
                        <h4 class="my-0 font-weight-normal">{{ movie.title }}</h4>
                    </div>
                    <div class="card-body">
                        <img class="mx-auto d-block center" src={{ movie.image }} width="150">
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Рейтинг: {{ movie.vote_average }}</li>
                            <li>Дата выхода: {{ movie.release_date }}</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block"
                                onclick="location.href='/movie/{{ movie.id }}'">Выбрать фильм
                        </button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

我想要如何获得

​

Answer 1

在.card中添加类.h-100就可以做到这一点。

Codepen

Answer 2

因为你没有设置卡片高度。如果你想让他们看到相同的高度，你必须设置卡片高度

Answer 3

临时解决方案

.card-header{
    min-height: 15vh!important;
    height: 100%!important;
}