Display属性

怎样工作

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

符号

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

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

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

其中 值 为以下值之一：

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

可以通过更改$displays 变量并重新编译scs来更改display值。

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

示例

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

隐藏元素

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

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

要仅在给定的屏幕大小间隔上显示元素，可以将一个 .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实用程序类打印时更改元素的 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

打印和显示类可以合并。

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