Bootstrap 卡片组无法对齐卡片高度

Question

我使用过 Bootstrap 的卡片组，但似乎无法使其垂直对齐。 其中一张卡片的文字较短并造成不匹配，不知道如何修复它..

我还应该提到，我希望在桌面和移动设备上的该页面上显示 3 张卡片，它垂直堆叠，因此我需要在我的 css 文件中留出额外的边距。

<div class="container mw-100 h-100">
    <div class="row h-100 align-items-center">
        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
            <div class="card">
                <img class="card-img-top" src="img1.jpg" alt="img1" />
                <div class="card-body">
                    <h5 class="card-title">Title 1</h5>
                    <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
                    </p>
                    <p class="card-text">
                        <button type="button" class="btn btn-dark btn-lg" onclick="startGame()">Start</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
            <div class="card">
                <img class="card-img-top" src="img2.jpg" alt="img2" />
                <div class="card-body">
                    <h5 class="card-title">Title 2<span class="badge badge-secondary">New</span></h5>
                    <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
                    </p>
                    <p class="card-text">
                        <button type="button" class="btn btn-dark btn-lg">Start</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
            <div class="card">
                <img class="card-img-top" src="img3.jpg" alt="img3" />
                <div class="card-body">
                    <h5 class="card-title">Title 3<span class="badge badge-secondary">New</span></h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.</p>
                    <p class="card-text">
                        <button type="button" class="btn btn-dark btn-lg">Start</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

至于其他 css，只需要对齐容器本身的高度和一些边距以及常规的浏览器重置道具。

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html,
body {
    height: 100%;
}

.card {
    margin-bottom: 0.75rem;
}

.row :first-child > .card {
    margin-top: 0.75rem;
}

Answer 1

这是因为您的项目与中心对齐 <div class="row h-100 align-items-center"> 将其更改为顶部 <div class="row h-100 align-items-top"> 这是在您的 html 的第二行。见这里：https://jsfiddle.net/wp406n8d/4/

另外，你可以去掉这段代码：

.row :first-child > .card {
    margin-top: 0.75rem;
}

我不完全确定你是否也想要这个，但你可以简单地将height: 100% 添加到.card 类中，使所有卡片的高度相同。见这里：https://jsfiddle.net/7ah6f4mo/