Display propertyDisplay属性

How it works作用原理

Change the value of the display property with our responsive display utility classes. 使用响应显示实用程序类更改display属性的值。We purposely support only a subset of all possible values for display. 我们特意只支持display所有可能值的子集。Classes can be combined for various effects as you need.可以根据需要组合类以获得各种效果。

Notation符号

Display utility classes that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. 显示应用于所有断点（从xs到xxl）的实用程序类中没有断点缩写。This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. 这是因为这些类是应用于min-width: 0;及以上；并且因此不受媒体查询的约束。The remaining breakpoints, however, do include a breakpoint abbreviation.然而，其余的断点确实包含断点缩写。

As such, the classes are named using the format:因此，类使用以下格式命名：

• .d-{value} for xs用于xs
• .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.用于sm、md、lg、xl和xxl。

Where value is one of:其中value是以下值之一：

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

The display values can be altered by changing the $displays variable and recompiling the SCSS.可以通过更改$displays变量并重新编译SCSS来更改显示值。

The media queries affect screen widths with the given breakpoint or larger. 媒体查询影响给定断点或更大断点的屏幕宽度。For example, .d-lg-none sets display: none; on lg, xl, and xxl screens.例如，.d-lg-none在lg、xl和xxl屏幕上设置display: none;。

Examples示例

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

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

Hiding elements隐藏元素

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. 为了实现更快的移动友好开发，请使用响应显示类按设备显示和隐藏元素。Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.避免创建同一网站的完全不同版本，而是根据每个屏幕大小隐藏元素。

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.要隐藏元素，只需使用.d-none类或.d-{sm,md,lg,xl,xxl}-none类中的一个来进行任何响应屏幕变化。

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none .d-xxl-none will hide the element for all screen sizes except on medium and large devices.要仅在给定的屏幕大小间隔上显示元素，可以将一个.d-*-none类与.d-*-*类组合，例如.d-none .d-md-block .d-xl-none .d-xxl-none将隐藏所有屏幕大小的元素，中型和大型设备除外。

<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打印时显示

Change the display value of elements when printing with our print display utility classes. 使用打印显示实用程序类打印时，更改元素的display值。Includes support for the same display values as our responsive .d-* utilities.包括支持与响应.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

The print and display classes can be combined.打印类和显示类可以合并。

<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>

Sass

Utilities API实用程序API

Display utilities are declared in our utilities API in scss/_utilities.scss. 显示实用程序在scss/_utilities.scss中的实用程序API中声明。Learn how to use the utilities API.了解如何使用实用程序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
),