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/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 屬性可以具有以下值：

類 描述
.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/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 屬性可以具有以下值：

類 描述
.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/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>
列印頁面
上一頁
下一頁
廣告