Bootstrap 简明教程
Bootstrap - Overflow
本章讨论 Bootstrap 的溢出实用程序。溢出实用程序类用于控制元素内溢出内容的行为。
This chapter discusses about the overflow utility of Bootstrap. The overflow utility classes are used to control the behavior of overflowing content within an element.
Bootstrap 提供了一些与溢出相关的实用程序类。默认情况下,这些类没有响应性。
Bootstrap provides several utility classes related to overflow. By default these classes are not responsive.
Class |
Description |
.overflow-auto |
automatically adds the scrollbar to the element if the content exceeds the dimensions of the element. |
.overflow-hidden |
hides the content when it exceeds the dimensions of the element. |
.overflow-scroll |
adds the scrollbar to the element regardless of whether the content exceeds the dimensions of the element or not. |
.overflow-visible |
allows the content to overflow the dimensions of the element without clipping or scrolling. |
我们看一个示例:
Let us see an example:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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 属性用于控制元素的水平溢出行为。它确定当元素内的内容超过其沿水平轴的宽度时会发生什么。
The overflow-x property is used to control the horizontal overflow behavior of an element. It determines what happens when the content within an element exceeds its width along the horizontal axis.
overflow-x 属性可以有以下值:
The overflow-x property can have the following values:
Class |
Description |
.overflow-x-auto |
automatically adds the horizontal scrollbar to the element if the content exceeds the width of the element. |
.overflow-x-hidden |
hides the content when it exceeds the width of the element along the horizontal axis. |
.overflow-x-scroll |
adds the horizontal scrollbar to the element regardless of whether the content exceeds the width of the element or not. |
.overflow-x-visible |
allows the content to overflow the dimensions of the element along the horizontal axis without clipping or scrolling. |
我们看一个示例:
Let us see an example:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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 属性用于控制元素的垂直溢出行为。它确定当元素内的内容超过其沿垂直轴的高度时会发生什么。
The overflow-y property is used to control the vertical overflow behavior of an element. It determines what happens when the content within an element exceeds its height along the vertical axis.
overflow-y 属性可以具有以下值:
The overflow-y property can have the following values:
Class |
Description |
.overflow-y-auto |
automatically adds the vertical scrollbar to the element if the content exceeds the height of the element. |
.overflow-y-hidden |
hides the content when it exceeds the height of the element along the vertical axis. |
.overflow-y-scroll |
adds the vertical scrollbar to the element regardless of whether the content exceeds the height of the element or not. |
.overflow-y-visible |
allows the content to overflow the dimensions of the element along the vertical axis without clipping or scrolling. |
我们看一个示例:
Let us see an example:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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>