引导卡高度全卡头答案

【问题标题】：bootstrap card height-full card-header引导卡高度全卡头
【发布时间】：2020-05-27 20:44:37
【问题描述】：

如何对齐组中的卡片？如果我在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>

我想如何获得

【问题讨论】：

标签： html flask bootstrap-4

【解决方案1】：

将.h-100 类添加到.card 即可。

Codepen

【讨论】：

我写过，如果你加上 height-full，那么一切都会移出
@sonfire 你说你把它添加到.card-header 不是吗？你能提供一个在这种情况下布局如何中断的屏幕截图吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

临时解决方案

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

【讨论】：