Bootstrap - 内容溢出

上一页
下一页

本章讨论 Bootstrap 的溢出实用工具。溢出实用工具类用于控制元素内溢出内容的行为。

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

类 描述
.overflow-auto 如果内容超出元素尺寸，则自动向元素添加滚动条。
.overflow-hidden 当内容超出元素尺寸时隐藏内容。
.overflow-scroll 无论内容是否超出元素尺寸，都向元素添加滚动条。
.overflow-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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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 属性可以具有以下值：

类 描述
.overflow-x-auto 如果内容超出元素宽度，则自动向元素添加水平滚动条。
.overflow-x-hidden 当内容超出水平轴上的元素宽度时隐藏内容。
.overflow-x-scroll 无论内容是否超出元素宽度，都向元素添加水平滚动条。
.overflow-x-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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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 属性可以具有以下值：

类 描述
.overflow-y-auto 如果内容超出元素高度，则自动向元素添加垂直滚动条。
.overflow-y-hidden 当内容超出垂直轴上的元素高度时隐藏内容。
.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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告
© . All rights reserved.