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

【问题标题】：Horizontally scrollable list of cards in BootstrapBootstrap 中可水平滚动的卡片列表
【发布时间】：2025-12-22 17:35:06
【问题描述】：

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

这可以通过 CSS 轻松完成，但我想使用 Bootstrap 来完成。 Bootstrap 4 ships with cards 被材料设计所普及，它们与 Bootstrap 中的其他任何东西一样易于使用。对于这个例子，它也可以是普通的divs，而不是卡片。

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案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 工具：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

【讨论】：

codeply 链接未显示您的示例...如果需要进行任何更改，您是否可以更新到 bootstrap 4-beta2？
这里显示第二个示例的更新代码会更有帮助，而不是必须点击链接。
在上述解决方案中添加overflow-auto 会在幻灯片中添加滚动条（BS 4.0）。 <div class="d-flex flex-row flex-nowrap overflow-auto">
@Zim 此解决方案无效，因为您无法控制溢出。您必须添加另一个类来设置溢出状态，否则整个页面宽度将被扩展。
@ikonuk 我不明白你所说的“控制溢出”是什么意思。 OP 要求提供水平滚动卡片，这就是答案。

【解决方案2】：

最有效的解决方案如下所示。除了flex-nowrap，您还需要设置overflow 属性以防止整个页面扩展。

使用overflow 属性：

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <h6>Bootstrap 4 horizontally scrollable card groups</h6>
 <div class="d-flex flex-row flex-nowrap overflow-auto">
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>            
</div>

没有overflow 属性：

     <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

     <h6>Bootstrap 4 horizontally scrollable card groups</h6>
     <div class="d-flex flex-row flex-nowrap">
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>            
    </div>

【讨论】：

列应始终放在.row。 This doesn't work 因为列垂直堆叠并且没有display: flex
@Zim 我引用了投票最多的答案并添加了overflow-auto 类以强调这是必要的，但你是对的，列应该放在row 中，row 应该放在@ 987654333@。我更新了答案，谢谢。

【解决方案3】：

您可以使用bootstrap-horizon

安装

在 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">

将.row-horizon 类添加到需要水平滚动的.rows。为了改进用户体验，bootstrap-horizon 覆盖了 bootstrap 的 .col-*-* 类，以使基线宽度为 90% 而不是 100%，这允许显示最后一列的一小部分。

<div class="row row-horizon">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    ...
  </div>
</div>

示例

【讨论】：

谢谢！我尚未接受您的回答，因为我在 Bootstrap 4 中找到了一种“本地”执行此操作的方法，稍后我将发布该方法。亲爱的 google 人，他们对我从未发布过我的解决方案感到恼火：这个想法是将卡片组放入 hor 中。可滚动容器并缩放卡片组，以便显示正确数量的卡片。
@Lukas 你好！我和你有同样的问题，你能发布我们的原生解决方案吗？如果你还有一些代码会很棒
@VivienAd 不要像explained in my answer那样使用新的flexbox实用程序

【解决方案4】：

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; 这将确保所有卡片的高度相同。

【讨论】：

【解决方案5】：

要添加到@ikonuk 的答案，如果您有一个使用列的布局，并且希望在每张卡片都有最小长度的列中添加一个水平滚动的卡片列表，您可能会发现“容器”列中断通过拖动调整浏览器窗口大小时的网格系统，当您使用时

style: min-width: 300px // (or any other value in pixels)

设置卡片的最小宽度。

为了不让列中断，只需使用百分比值作为每张卡片的最小宽度，或者使用引导程序的w-xx 类来设置每张卡片的百分比。

（这可能也适用于 bootstrap 5，但尚未对其进行测试，因为目前在使用 bootstrap 4 的项目中偶然发现了这一点）

【讨论】：