Css 引导中卡片的水平滚动列表

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

这可以很容易地用CSS来完成，但我想用Bootstrap来完成。由于材料设计的普及，它们与Bootstrap中的任何其他工具一样易于使用。对于本例，它也可以是常规的

div

s，而不是卡片

我正在努力创建一个包含X卡（或div）的可滚动容器，其中3张卡一次显示，其他卡溢出到右侧并可滚动。我不知道如何使用引导给卡片（或div）一个宽度，以便一次显示3张卡片，而其他的卡片则位于它们旁边的右侧。

您可以使用

安装

在bootstrap.css之后包括bootstrap-horizon.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

示例

---

既然引导程序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>

卡片
卡片
卡片
卡片
...

更新2019 Bootstrap 4.3+

---

上述方法仍然有效，或者您可以使用卡片容器中的flexbox utils:

Bootstap 4.3
Scss文件

.card-deck-scrollable{
  @extend .card-deck;
  flex-direction: row;

  & > .card{
    @extend .mx-3;
    flex: 0 0 40% !important;/*Change to any size you want*/
    max-width: 40%;
  }
}

html文件

<div class="card-deck-scrollable flex-nowrap overflow-auto">
  <div class="card">
    <div class="card-body">
      <div class="card-title">Name</div>
    </div>
  </div>
</div>

名称

---

由于您正在实现一个水平滚动，我确信所有的卡都必须是相同的，因此

@extend.card-deck这将确保所有卡的高度相同。
最有效的解决方案如下所示。除了
flex nowrap
之外，还需要设置
overflow
属性以防止整个页面扩展

使用
溢出
属性：

引导4个水平滚动卡组
卡片
卡片
卡片
谢谢！我还没有接受你的答案，因为我在Bootstrap4中找到了一种“本机”实现的方法，我将在稍后发布。亲爱的谷歌用户，我从来没有发布过我的解决方案，他们对此很恼火：我的想法是把一副牌放到一张桌子上。滚动容器并缩放卡片组，以便显示正确数量的卡片。@Lukas您好！我和你有同样的问题，你能发布我们的本地解决方案吗？如果你还有一些代码，那就太棒了it@VivienAdnot使用新的flexbox实用程序，因为codeply链接没有显示您的示例。。。如果有必要进行任何更改，您是否可以更新到bootstrap 4-beta2？在这里显示第二个示例的更新代码，而不必点击链接，这将更有帮助。将
溢出自动
添加到上述解决方案中会在幻灯片上添加一个滚动条（BS 4.0）
@Zim此解决方案无效，因为您无法控制溢出。您必须添加另一个类来设置溢出状态，否则整个页面宽度将被扩展。@ikonuk我不明白您所说的“控制溢出”是什么意思。OP要求使用水平滚动卡，这就是答案。列应始终放置在
行中。由于列是垂直堆叠的，并且没有显示：flex
@Zim我引用了最有投票权的答案，并添加了
overflow auto
类来强调这一点是必要的，但是您是对的，列应该放在
行
中，并且
行
应该放在
容器中。我更新了答案，谢谢。
<div class="card-deck-scrollable flex-nowrap overflow-auto">
  <div class="card">
    <div class="card-body">
      <div class="card-title">Name</div>
    </div>
  </div>
</div>