引导卡高度-全卡头

Question

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

    <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

将类.h-100添加到.card可以解决问题。

Codepen

Answer 2

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

Answer 3

临时解决方案

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