显示 · Bootstrap 6.0 中文文档

类名	样式
.d-inline	display: inline;
.d-inline-block	display: inline-block;
.d-block	display: block;
.d-grid	display: grid;
.d-inline-grid	display: inline-grid;
.d-table	display: table;
.d-table-row	display: table-row;
.d-table-cell	display: table-cell;
.d-flex	display: flex;
.d-inline-flex	display: inline-flex;
.d-contents	display: contents;
.d-flow-root	display: flow-root;
.d-none	display: none;

它是如何工作的

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

符号

适用于所有断点的显示工具类，从 xs 到 2xl，没有包含断点缩写。这是因为这些类从 min-width: 0; 开始应用，因此不受媒体查询的限制。然而，其余的断点确实包含断点缩写。

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

.d-{value} 对于 xs
.{breakpoint}:d-{value} 对于 sm、md、lg、xl 和 2xl（例如，.md:d-none）。

其中 value 为以下之一：

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

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

媒体查询影响具有给定断点的屏幕宽度 或更大例如， .lg:d-none 集合 display: none; 开 lg, xl，和 2xl 屏幕。

清除浮动

在 Bootstrap 6 中不再有 clearfix 辅助类，因为它是一种过时的技术。取而代之的是使用 display: flow-root 工具，.d-flow-root。这会强制容器元素在没有 clearfix 的情况下创建一个新的块格式化上下文。

浮动元素

HTML

<div class="d-flow-root">
  <div class="float-end px-3 py-2 border rounded-3">Floated element</div>
</div>

示例

d-inline

HTML

<div class="d-inline p-2 theme-primary theme-contrast">d-inline</div>
<div class="d-inline p-2 theme-secondary theme-contrast">d-inline</div>

d-块 d-块

HTML

<span class="d-block p-2 theme-primary theme-contrast">d-block</span>
<span class="d-block p-2 theme-secondary theme-contrast">d-block</span>

隐藏元素

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

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

要仅在给定的屏幕尺寸区间显示一个元素，你可以将一个.{breakpoint}:d-none类与一个.{breakpoint}:d-block类结合使用，例如.d-none .md:d-block .xl:d-none将会在所有屏幕尺寸上隐藏该元素，除了中等和大型设备。

屏幕尺寸	类名
全部隐藏	`.d-none`
仅在 XS 上隐藏	`.d-none .sm:d-block`
仅在小型设备上隐藏	`.sm:d-none .md:d-block`
仅在中等屏幕隐藏	`.md:d-none .lg:d-block`
仅在 lg 上隐藏	`.lg:d-none .xl:d-block`
仅在 XL 上隐藏	`.xl:d-none .2xl:d-block`
仅在 2xl 上隐藏	`.2xl:d-none`
对所有人可见	`.d-block`
仅在 xs 上可见	`.d-block .sm:d-none`
仅在小屏幕上可见	`.d-none .sm:d-block .md:d-none`
仅在中等屏幕可见	`.d-none .md:d-block .lg:d-none`
仅在 lg 可见	`.d-none .lg:d-block .xl:d-none`
仅在 xl 上可见	`.d-none .xl:d-block .2xl:d-none`
仅在 2xl 可见	`.d-none .2xl:d-block`

在大屏幕及更大屏幕上隐藏

HTML

<div class="lg:d-none">hide on lg and wider screens</div>
<div class="d-none lg:d-block">hide on screens smaller than lg</div>

CSS

Sass 工具 API

显示工具在我们的工具类 API 中的 scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss

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