Bootstrap 简明教程
Bootstrap - Overflow
本章讨论 Bootstrap 的溢出实用程序。溢出实用程序类用于控制元素内溢出内容的行为。
Bootstrap 提供了一些与溢出相关的实用程序类。默认情况下，这些类没有响应性。
Class |
Description |
.overflow-auto |
如果内容超过元素的尺寸，则自动向元素添加滚动条。 |
.overflow-hidden |
当内容超过元素的尺寸时，会隐藏内容。 |
.overflow-scroll |
无论内容是否超过元素的尺寸，都向元素添加滚动条。 |
.overflow-visible |
允许内容在不剪切或滚动的情况下溢出元素的尺寸。 |
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Overflow</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-3">
<h4 class="text-start text-primary">
Overflow utility example</h4>
<div class="overflow-auto mt-3 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
<code>.overflow-auto</code> is a class applied
on an element with set width and height dimensions.
By design, this content will vertically scroll, if overflowing.
</div>
<div class="overflow-hidden mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
<code>.overflow-hidden</code> is a utility class that is applied
on an element with set width and height dimensions. This will hide the contents, when overflowing.
</div>
<div class="overflow-visible mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
<code>.overflow-visible</code> is a utility class that is applied
on an element with set width and height dimensions. This will not hide the contents, when overflowing.
</div>
<div class="overflow-scroll mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
<code>.overflow-scroll</code> is a utility class that is applied
on an element with set width and height dimensions. This will always show a scroll bar irrespective of whether the content will overflow or not.
</div>
<div class="overflow-scroll mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
<code>.overflow-scroll</code> is a utility class that shows a scroll bar always.
</div>
</div>
</body>
</html>overflow-x
overflow-x 属性用于控制元素的水平溢出行为。它确定当元素内的内容超过其沿水平轴的宽度时会发生什么。
overflow-x 属性可以有以下值：
Class |
Description |
.overflow-x-auto |
如果内容超过元素的宽度，则自动向元素添加水平滚动条。 |
.overflow-x-hidden |
当内容超过元素沿水平轴的宽度时，会隐藏内容。 |
.overflow-x-scroll |
无论内容是否超过元素的宽度，都向元素添加水平滚动条。 |
.overflow-x-visible |
允许内容在不剪切或滚动的情况下沿水平轴溢出元素的尺寸。 |
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Overflow</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-3">
<h4>Overflow-x-* Example</h4>
<div class="overflow-x-auto mt-3 pb-5"
style="max-width: 340px; max-height: 90px;">
<code>.overflow-x-auto</code> allows the users to scroll horizontally and view the overflowed content.
</div>
<div class="overflow-x-hidden mt-5 pb-5"
style="max-width: 340px; max-height: 85px;">
<code>.overflow-x-hidden</code> is a class applied
on an element with set width and height dimensions.
This will hide the contents, when overflowing, along the x-axis.
</div>
<div class="overflow-x-visible mt-5 pb-5"
style="max-width: 340px; max-height: 80px;">
<code>.overflow-x-visible</code> is a class applied
on an element with set width and height dimensions.
This will not hide the contents, even when overflowing, along the x-axis.
</div>
<div class="overflow-x-scroll mt-5 pb-5"
style="max-width: 340px; max-height: 120px;">
<code>.overflow-x-scroll</code>
This ensures that a horizontal scrollbar is always present, even if there is no actual overflow along the horizontal axis.
</div>
</div>
</body>
</html>overflow-y
overflow-y 属性用于控制元素的垂直溢出行为。它确定当元素内的内容超过其沿垂直轴的高度时会发生什么。
overflow-y 属性可以具有以下值：
Class |
Description |
.overflow-y-auto |
如果内容超过元素的高度，自动为元素添加垂直滚动条。 |
.overflow-y-hidden |
当内容垂直超过元素的高度时，隐藏内容。 |
.overflow-y-scroll |
无论内容是否超过元素的高度，都为元素添加垂直滚动条。 |
.overflow-y-visible |
允许内容垂直超出元素尺寸，而无需剪切或滚动。 |
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Overflow</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Overflow-y-* Example</h4>
<div class="overflow-y-auto mt-3 pb-5"
style="max-width: 340px; max-height: 80px;">
<code>.overflow-y-auto</code> allows the users to scroll vertically and view the overflowed content.
In order to adjust the content, a vertical scroll bar should appear.
</div>
<div class="overflow-y-hidden mt-5 pb-5"
style="max-width: 340px; max-height: 80px;">
<code>.overflow-y-hidden</code> is a class applied
on an element with set width and height dimensions.
This will hide the contents, when overflowing, along the y-axis.
</div>
<div class="overflow-y-visible mt-5 pb-5"
style="max-width: 340px; max-height: 70px;">
<code>.overflow-y-visible</code> is a class applied
on an element with set width and height dimensions.
This will not hide the contents, even when overflowing, along the y-axis.
</div>
<div class="overflow-y-scroll mt-5"
style="max-width: 340px; max-height: 80px;">
<code>.overflow-y-scroll</code>
This ensures that a vertical scrollbar is always present, even if there is no actual overflow along the vertical axis.
</div>
</div>
</body>
</html>