如何在 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>

原文由 Greg Gum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

它将您的卡片排列成三列，并在屏幕尺寸较小时重新排列成一列。

卡片列上的 Bootstrap 文档

原文由 Greg Gum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想出了一个有效的浮动卡类：

 <style>
    .floating-card {
        float: left;
        margin: 5px;
        max-width: 300px;

    }
</style>

用法示例：

     <div class="floating-card sortable">
    <section class="box-typical task-card task">
        <div class="task-card-photo">
            <img src="img/img-task.jpg" alt="">
        </div>
        <div class="task-card-in">
            <div class="btn-group task-card-menu">
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="font-icon-dots-vert-square"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
                </div>
            </div>
            <div class="task-card-title">
                <a href="#">Create new webpage for sales and marketing stuff</a>
                <span class="task-card-title-label">(BIG)</span>
            </div>
            <div class="progress-compact-style">
                <progress class="progress" value="25" max="100">
                    <div class="progress">
                        <span class="progress-bar" style="width: 25%;">25%</span>
                    </div>
                </progress>
                <div class="progress-compact-style-label">37% done</div>
            </div>
            <div class="task-card-tags">
                <a href="#" class="label label-light-grey">Default</a>
                <a href="#" class="label label-light-grey">Primary</a>
                <a href="#" class="label label-light-grey">Success</a>
            </div>
        </div>
        <div class="task-card-footer">
            <div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
            <div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
            <div class="avatar-preview avatar-preview-32">
                <a href="#">
                    <img src="img/photo-64-2.jpg" alt="">
                </a>
            </div>
        </div>
    </section><!--.task-card-->
</div>

原文由 Greg Gum 发布，翻译遵循 CC BY-SA 3.0 许可协议