View on GitHub

Display property

使用我们的display utilities 快速、响应式地切换组件的display 值。包括对一些更常见值的支持，以及在打印时控制display的一些附加功能。

On this page

工作原理

更改display属性的值使用我们的响应式display utility 类。我们特意只支持display的所有可能值的子集。可以根据需要组合类以获得各种效果。

Notation

display应用于从xs到xxl的所有断点的utility类，这些类中没有断点缩写。这是因为这些类是从 min-width: 0; 应用的并且因此不受媒体查询的约束。然而，剩下的断点确实包括一个断点缩写。

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

.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

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

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

示例

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>

隐藏元素

为了更快地进行移动友好型开发，请使用响应式display类按设备显示和隐藏元素。避免创建同一网站的完全不同版本，而是根据每个屏幕大小相应地隐藏元素。

要隐藏元素，只需使用.d-none类或其中一个 .d-{sm,md,lg,xl,xxl}-none 用于任何响应式屏幕变体的类。

要仅在给定的屏幕大小间隔上显示元素，您可以将一个.d-*-none类与一个 .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

使用我们的打印 display utility 类进行打印时，更改元素的display值。包括对与我们的响应式.d-*utilities 相同的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 utilities在我们的utilities API中声明为scss/_utilities.scss。了解如何使用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
),