Bootstrap 4 .card-group 不适用于列内的卡片答案

【问题标题】：Bootstrap 4 .card-group not applying to cards within columnsBootstrap 4 .card-group 不适用于列内的卡片
【发布时间】：2016-05-03 13:17:07
【问题描述】：

我想创建一个包含 3 张卡片的卡片组，每张卡片应为 4 列宽。我如何实现这一点并保持 .card-group 工作以使它们都具有相同的高度？

<div class="row">
<div class="card-group">
    <div class="col-md-4">
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/400/200/">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Card text</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/400/200/">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Card text</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/400/200/">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Card text</p>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap height padding

【解决方案1】：

删除声明 col-md-4 类的 div。卡片组和卡片组可自动调整卡片宽度，并自动均匀间隔。

如果您想查看示例，请查看官方文档中groups 的示例块。

【讨论】：