在Bootstrap中，溢出（Overflow）是指內(nèi)容超出其容器尺寸的情況。為了處理溢出內(nèi)容，Bootstrap提供了一系列速記的通用類別來快速配置內(nèi)容溢出元素的方式。本篇教程將介紹使用這些速記的通用類別快速配置內(nèi)容溢出元素的方式。

一、溢出

默認情況下，overflow為兩個值提供準系統(tǒng)功能，并且它們沒有響應。

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

使用Sass變量可以透過更改_variables.scss中的$overflows變量以自定義溢出通用類別。

二、使用Sass

溢出實用程序在scss/_utilities.scss中的實用程序 API 中聲明。

"overflow": (
property: overflow,
values: auto hidden visible scroll,
),

三、溢出通用類

以下是Bootstrap中常用的溢出通用類：

1、.overflow-auto：添加此類別將在需要時自動顯示滾動條。

2、.overflow-hidden：添加此類別將隱藏溢出的內(nèi)容。

3、.overflow-visible：添加此類別將允許溢出的內(nèi)容在容器外部可見。

4、.overflow-scroll：添加此類別將始終在元素內(nèi)部顯示滾動條，無論是否需要。

這些類別可以應用于任何具有溢出內(nèi)容的元素，例如<div>、<section>、<article>等。通過使用這些類別，可以快速配置內(nèi)容溢出的方式，并增強頁面的可讀性和易用性。