Bootstrap 中可水平滚动的卡片列表

Question

我正在尝试创建一个水平的卡片列表，其中一次显示 3 张卡片，其他卡片可以水平滚动，如下所示：

这可以很容易地用 CSS 完成，但我想用 Bootstrap 来完成。 Bootstrap 4 附带了随着材料设计而流行的卡片，它们与 Bootstrap 中的其他任何东西一样易于使用。对于此示例，它也可以是常规的 div s，而不是卡片。

我正在努力解决的问题是创建一个可滚动的 X 卡片（或 div）容器，其中一次显示 3 个，其他的溢出到右侧并且是可滚动的。我不确定如何使用 Bootstrap 给卡片（或 div）一个宽度，以便一次显示 3 个，而其他的则位于右侧。

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

Answer 1

更新 2021 Bootstrap 5

Bootstrap 5 中仍然存在 flexbox 实用程序： https ://codeply.com/p/Vo13PAGO7e

 <div class="container-fluid py-2">
    <h2 class="font-weight-light">Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2>
    <div class="d-flex flex-row flex-nowrap">
        <div class="card card-body">Card</div>
        <div class="card card-body">Card</div>
        <div class="card card-body">Card</div>
        ...
    </div>
</div>

更新 2019 Bootstrap 4.3+

flexbox 方法仍然有效，因此您可以在卡片容器中使用 flexbox utils： https ://codeply.com/go/PF4APyGj7F

原始答案 Bootstrap 4 alpha

现在 Bootstrap 4 Alpha 6 使用了 flexbox，这种水平滚动布局就容易多了。您可以简单地使用 flex-row 和 flex-nowrap ：

 <div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://codeply.com/go/GoFQqQAFhN

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