Display属性

使用我们的显示实用程序快速响应地切换组件的Display属性值等。包括对一些更常见的值的支持，以及一些用于在打印时控制显示的附加功能。

在此页

怎么运行的

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

用法

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

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

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

其中value是以下之一：

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

可以通过更改在 SCSS $utilities中定义的display值并重新编译 SCSS 来更改Display属性值。

媒体查询会影响具有给定断点或更大断点的屏幕宽度。例如.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将隐藏所有屏幕尺寸的元素，中型和大型设备除外。

屏幕尺寸	类
隐藏在所有	`.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值。包括对与我们的响应.d-*实用程序相同的display值的支持。

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-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>

Saas

实用程序接口

显示实用程序在我们的实用程序 API 中声明scss/_utilities.scss。了解如何使用实用程序 API。

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