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

Question

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

这可以很容易地用 CSS 完成，但我想用 Bootstrap 来完成。 Bootstrap 4 ships with cards正如 Material 设计所普及的那样，它们与 Bootstrap 中的其他任何东西一样易于使用。对于此示例，它也可以是常规的 div 而不是卡片。

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

Answer 1

更新 2021 Bootstrap 5

Flexbox 实用程序仍然存在于 Bootstrap 5 中: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