CSS Bootstrap 4，使用Flexbox在一行中创建可滚动的列表组

在本文中，我们将介绍如何使用 CSS 和 Bootstrap 4 创建一个包含滚动列表的可滚动列表组。我们将使用 Flexbox 和一些 CSS 样式来实现这个效果。

阅读更多：CSS 教程

准备工作

在开始之前，我们需要引入 Bootstrap 4 的 CSS 文件。可以通过以下方式之一来引入：

在 HTML 文件的 <head> 标签中添加以下代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

在项目中下载 Bootstrap 4 的 CSS 文件，并将其放置在正确的文件路径中。

完成上述准备工作后，我们可以开始创建可滚动的列表组。

使用列表组的基本结构

使用 Bootstrap 4，我们可以通过以下结构创建一个基本的列表组：

<div class="list-group">
  <a href="#" class="list-group-item">Item 1</a>
  <a href="#" class="list-group-item">Item 2</a>
  <a href="#" class="list-group-item">Item 3</a>
  <!-- 添加更多项目 -->
</div>

以上代码将创建一个包含三个项目的列表组。每个项目都使用了 list-group-item 类，这是 Bootstrap 4 中用于列表组项目的默认类。

在一行中使用 Flexbox

为了在一行中显示列表组，并使其可以水平滚动，我们可以使用 Flexbox。要实现这个效果，我们需要在包裹列表组的父容器上添加以下样式：

.list-group-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

然后将列表组的样式修改如下：

.list-group {
  display: flex;
  flex-wrap: nowrap;
}

这样，列表组将根据 Flexbox 的布局方式水平排列，父容器的 overflow-x: auto 样式将使得如果列表组的宽度超过父容器的宽度，就会出现水平滚动条。

现在，我们可以将以上样式应用到我们之前创建的列表组结构上：

<div class="list-group-container">
  <div class="list-group">
    <a href="#" class="list-group-item">Item 1</a>
    <a href="#" class="list-group-item">Item 2</a>
    <a href="#" class="list-group-item">Item 3</a>
    <!-- 添加更多项目 -->
  </div>
</div>

禁止页面滚动

有时候，我们可能希望在滚动列表组时禁止页面的滚动。一种常见的情况是在有领域填充地图的页面中使用可滚动列表组。这种情况下，我们可以使用以下 CSS 样式来禁止页面滚动：

body {
  overflow: hidden;
}

请注意，这个样式应该应用在该页面的 CSS 文件中。

允许页面滚动

如果我们希望在滚动列表组时页面可以继续滚动，可以简单地将之前提到的 overflow 样式修改如下：

body {
  overflow: auto;
}

这样，当滚动到列表组的末尾时，页面将能够继续滚动。

示例

以下是一个包含可滚动列表组的示例代码，包括使用 Flexbox 在一行中显示并禁止页面滚动：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .list-group-container {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .list-group {
      display: flex;
      flex-wrap: nowrap;
    }

    body {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="list-group-container">
    <div class="list-group">
      <a href="#" class="list-group-item">Item 1</a>
      <a href="#" class="list-group-item">Item 2</a>
      <a href="#" class="list-group-item">Item 3</a>
      <!-- 添加更多项目 -->
    </div>
  </div>
</body>
</html>