溢出 · Bootstrap 6.0 中文文档

类名	样式
.溢出自动	overflow: auto;
.溢出隐藏	overflow: hidden;
.溢出可见	overflow: visible;
.overflow-scroll	overflow: scroll;
.横向溢出自动	overflow-x: auto;
.overflow-x-hidden	overflow-x: hidden;
.overflow-x-visible	overflow-x: visible;
.overflow-x-scroll	overflow-x: scroll;
.纵向溢出自动	overflow-y: auto;
.overflow-y-hidden	overflow-y: hidden;
.overflow-y-visible	overflow-y: visible;
.纵向溢出滚动	overflow-y: scroll;

溢出

使用四个默认值和类动态调整overflow属性。这些类默认情况下不是响应式的。

这是在具有固定宽度和高度的元素上使用.overflow-auto的示例。根据设计，此内容将垂直滚动。

这是在具有固定宽度和高度的元素上使用.overflow-hidden的示例。

这是在具有固定宽度和高度的元素上使用.overflow-visible的示例。

这是在具有固定宽度和高度的元素上使用.overflow-scroll的示例。

HTML

          <div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

`overflow-x`

调整 overflow-x 属性以影响内容的水平溢出。

.overflow-x-auto 元素示例

具有设定的宽度和高度尺寸。

.overflow-x-hidden 例子

在具有设定宽度和高度的元素上。

.overflow-x-visible 例子

在具有设定宽度和高度的元素上。

.overflow-x-scroll 元素示例

具有设定的宽度和高度尺寸。

HTML

          <div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>

`overflow-y`

调整 overflow-y 属性以影响内容的垂直溢出。

.overflow-y-auto 在设置了宽度和高度的元素上的示例。

.overflow-y-hidden 在设置了宽度和高度的元素上的示例。

.overflow-y-visible 在设置了宽度和高度的元素上的示例。

.overflow-y-scroll 在设置了宽度和高度的元素上的示例。

HTML

          <div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>

使用 Sass 变量，你可以通过更改来自定义溢出工具 $overflows 变量在 _config.scss.

CSS

Sass 工具 API

溢出工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

scss/_utilities.scss

"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),