View on GitHub

显示属性（Display property）

利用我们的显示实用程序，快速、灵敏地切换组件的显示值等。包括对一些常用值的支持，以及在打印时控制显示的一些额外功能。

On this page

工作原理

使用我们的响应式显示实用工具类更改 display属性的值。我们特意只支持 display 所有可能值的一个子集。您可以根据需要组合这些类，以获得各种效果。

标记

适用于从 xs 到 xxl 的显示实用程序类中没有断点缩写的所有断点。这是因为这些类别是从 min-width: 0; 开始应用的，因此不受媒体查询的约束。而其余的断点则包含断点缩写。

因此，这些类的命名格式为：

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

其中 value 是以下内容之一：

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

可以通过更改 $utilities 中定义的 display 值并重新编译 SCSS 来更改显示值。

媒体查询会影响指定断点或更大的屏幕宽度。例如，.d-lg-none 在 lg、xl 和 xxl 屏幕上设置display: none;。

示例

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>

隐藏元素

为加快移动友好型开发，可使用响应式显示类来按设备显示和隐藏元素。避免为同一个网站创建完全不同的版本，而是针对每种屏幕尺寸响应式地隐藏元素。

要隐藏元素，只需针对任何响应式屏幕变化使用.d-none类或.d-{sm,md,lg,xl,xxl}-none类。

若要仅在特定屏幕尺寸范围内显示元素，可将一个.d-*-none类与一个.d-*-*类结合使用，例如，.d-none .d-md-block .d-xl-none .d-xxl-none 将在除中型和大型设备外的所有屏幕尺寸下隐藏元素。

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none .d-xxl-block`
Hidden only on xxl	`.d-xxl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on 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 值。包括支持与我们的响应式 .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

打印类和显示类可以合并。

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

显示实用程序在 scss/_utilities.scss 中的实用程序 API 中声明。了解如何使用实用程序 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
),