如何在 Bootstrap 行中实现水平滚动？

在 Bootstrap 中，我们可以通过更改元素的某些 CSS 属性来使任何行实现水平滚动

将所有 div 元素的 display 属性更改为 inline

使用 overflow-x 属性添加水平方向的滚动条

通过使用 white-space 属性将所有 div 元素对齐到一行

让我们看看以上方法的示例

示例 1

输出

说明

在上面的代码中，我们包含了 Bootstrap 的 CSS 文件，以便使用内置的类。在 body 部分，我们使用 center 标签并将所有代码放在此标签中，以将所有元素对齐到页面中心。在行的 div 部分，我们使用 CSS 创建了十个 div 元素，并且我们将这些 div 的 display 更改为 inline-block。我们还设计了这些元素中文本的颜色和大小。行的 div 元素设置为 overflow-x 为 auto。因此，它将在水平方向添加滚动条。

注意：我们也可以通过将 overflow-y 的属性更改为 auto 来添加垂直方向的滚动条。

示例 2

输出

说明

在上面的代码中，我们包含了 Bootstrap 的 CSS 文件，以便使用内置的类。在 body 部分，我们使用 center 标签并将所有代码放在此标签中，以将所有元素对齐到页面中心。在行的 div 部分，我们使用 CSS 创建了十四个 div 元素，并且我们将这些 div 的 display 更改为 block。我们还设计了这些元素中文本的颜色和大小。行的 div 元素设置为 overflow-y 为 scroll。因此，它将在垂直方向添加滚动条。