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.netwp406n8d4

另外，你可以把这个代码去掉。

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

我不太确定你是否也想这样做，但你可以简单地加上： height: 100% 至 .card 类，使所有的卡片高度相同。请看这里。 https:/jsfiddle.net7ah6f4mo。