Display 屬性（Display property）

使用我們的 display 工具程式快速且響應式地切換元件及其他元素的 display 值。支援一些較常見的值，以及一些用於控制列印時顯示的額外選項。

本頁內容

運作原理（How it works）

使用我們的響應式 display 通用類別來變更 display 屬性的值。我們刻意只支援 display 所有可能值的子集。可以根據需要組合類別來產生各種效果。

命名規則（Notation）

套用於所有中斷點（從 xs 到 xxl）的 display 通用類別，名稱中不包含中斷點縮寫。這是因為這些類別從 min-width: 0; 開始套用，因此不受 media query 限制。然而，其餘的中斷點確實包含中斷點縮寫。

因此，類別使用以下格式命名：

.d-{value} 用於 xs
.d-{breakpoint}-{value} 用於 sm、md、lg、xl 和 xxl。

其中 value 是以下之一：

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

display 值可以透過變更 $utilities 中定義的 display 值並重新編譯 SCSS 來修改。

media query 會影響給定中斷點或更大的螢幕寬度。例如，.d-lg-none 會在 lg、xl 和 xxl 螢幕上設定 display: none;。

範例（Examples）

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

隱藏元素（Hiding elements）

為了更快速的行動裝置友善開發，使用響應式 display 類別來根據裝置顯示和隱藏元素。避免建立完全不同版本的相同網站，而是針對每個螢幕尺寸響應式地隱藏元素。

要隱藏元素，只需使用 .d-none 類別或任何響應式螢幕變體的 .d-{sm,md,lg,xl,xxl}-none 類別。

要僅在給定的螢幕尺寸區間顯示元素，您可以將一個 .d-*-none 類別與一個 .d-*-* 類別組合，例如 .d-none .d-md-block .d-xl-none 會在所有螢幕尺寸上隱藏元素，除了中型和大型裝置。

螢幕尺寸	類別
在所有尺寸隱藏	`.d-none`
僅在 xs 隱藏	`.d-none .d-sm-block`
僅在 sm 隱藏	`.d-sm-none .d-md-block`
僅在 md 隱藏	`.d-md-none .d-lg-block`
僅在 lg 隱藏	`.d-lg-none .d-xl-block`
僅在 xl 隱藏	`.d-xl-none .d-xxl-block`
僅在 xxl 隱藏	`.d-xxl-none`
在所有尺寸顯示	`.d-block`
僅在 xs 顯示	`.d-block .d-sm-none`
僅在 sm 顯示	`.d-none .d-sm-block .d-md-none`
僅在 md 顯示	`.d-none .d-md-block .d-lg-none`
僅在 lg 顯示	`.d-none .d-lg-block .d-xl-none`
僅在 xl 顯示	`.d-none .d-xl-block .d-xxl-none`
僅在 xxl 顯示	`.d-none .d-xxl-block`

hide on lg and wider screens

hide on screens smaller than lg

html

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

列印時顯示（Display in print）

使用我們的列印 display 通用類別來變更列印時元素的 display 值。支援與我們響應式 .d-* 工具程式相同的 display 值。

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

列印和 display 類別可以組合使用。

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

html

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

CSS

Sass utilities API

Display 通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

scss/_utilities.scss

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),