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/

引导卡座无法获得卡高度对齐

1 个答案: