Bootstrap 4 卡在多行上响应相同的高度答案

【问题标题】：Bootstrap 4 cards responsive with same height on multiple rowsBootstrap 4 卡在多行上响应相同的高度
【发布时间】：2021-08-09 17:24:51
【问题描述】：

我是设计和 Bootstrap 的新手，所以请耐心等待。

我想在所有行上放置一些高度和宽度相等的卡片（不是固定的，而是响应式的），或者换句话说，所有卡片都应该与其中最大的卡片一样高和宽。欢迎任何解决方案，不限于 Bootstrap。在下面的示例中，在大屏幕上，行和卡片的高度越来越大，而在中等屏幕上，几乎每一行都有不同的高度：

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

【问题讨论】：

所有卡片的高度相同。你想让锚标签在底部对齐吗？
我也可以获取 CSS 吗？或者只是在这里嵌入代码。
请分享您的尝试。
卡片高度不一样，1段的比3段的短。 CSS 只是基本的 Bootstrap ，没有自定义 CSS 文件。与脚本相同，只是基础：我试过了：class="row align-items-center" class="row row-eq-height"
我也试过：class="card-deck"（这是另一回事，只是失败了），一个 class="col-lg-4 col-md-6 d- flex align-items-stretch" 包含一个 class="card h-100 mb-4"

标签： css bootstrap-4

【解决方案1】：

如何将style="height: 200px; max-height: 200px; overflow-y: auto;" 添加到具有card-body类的所有div中

代码如下：

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 my-3 d-flex">
                <div class="card h-100">
                    <img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
                    <div class="card-body" style="height: 200px; max-height: 200px; overflow-y: auto;">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
</section>

这将使所有行的高度相同。

【讨论】：

谢谢佐哈。我的图像大小/高度并不完全相同，这会改变卡片格式，滚动机制也需要使用，但我可以将图像设置为固定值并找到不会触发滚动的高度。它确实对我有很大帮助。非常感谢！