Bootstrap - 溢出

本章讨论 Bootstrap 的溢出实用程序。溢出实用程序类用于控制元素内溢出内容的Behave。

Bootstrap提供了几个与溢出相关的实用程序类。默认情况下，这些类不响应。

班级	描述
.overflow-auto	如果内容超出元素的尺寸，则会自动将滚动条添加到元素。
.溢出隐藏	当内容超过元素的尺寸时隐藏内容。
.溢出滚动	无论内容是否超出元素的尺寸，都会向元素添加滚动条。
.overflow-可见	允许内容溢出元素的尺寸，而无需剪切或滚动。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

溢出-x

Overflow -x属性用于控制元素的水平溢出Behave。它确定当元素内的内容超出其水平轴宽度时会发生什么。

Overflow -x属性可以具有以下值：

班级	描述
.overflow-x-auto	如果内容超出元素的宽度，则会自动向元素添加水平滚动条。
.overflow-x-隐藏	当内容超出元素沿水平轴的宽度时隐藏内容。
.overflow-x-滚动	无论内容是否超过元素的宽度，都会向元素添加水平滚动条。
.overflow-x-可见	允许内容沿水平轴溢出元素的尺寸，而无需剪切或滚动。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

溢出-y

Overflow -y属性用于控制元素的垂直溢出Behave。它确定当元素内的内容超过其垂直轴高度时会发生什么。

Overflow -y属性可以具有以下值：

班级	描述
.overflow-y-auto	如果内容超出元素的高度，则会自动向元素添加垂直滚动条。
.overflow-y-隐藏	当内容沿垂直轴超过元素高度时隐藏内容。
.overflow-y-scroll	无论内容是否超过元素的高度，都会向元素添加垂直滚动条。
.overflow-y-visible	允许内容沿垂直轴溢出元素的尺寸，而无需剪切或滚动。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>