如何在bootstrap 4中包装(浮动)卡片

Question

我正在使用bootstrap 4 beta.

我有一张卡片清单.我希望它们具有固定宽度,但高度将根据内容而变化.

卡的数量可以是1到n.

我想要的效果是从左到右布局卡片直到屏幕空间用完,然后换行到下一行.

我已经尝试了bootstrap 4示例页面上列出的所有不同选项,但它们似乎并没有包装.

我怎样才能做到这一点？

下面的示例显示了它们之间的3个,它们之间有很大的空间.

 <div class="card-columns">

        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card"style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>

Answer 1

在使用了一段时间之后,我提出的浮动解决方案并不令人满意,因为在某些情况下,某些卡片下方有大量空间.在查看bootstrap 4卡片后,我发现了一个功能完全符合我的要求它:"卡列"

它将您的卡排成三列,并在屏幕尺寸较小时重新排列到一列.

卡片列上的Bootstrap文档