Skip to main content Skip to docs navigation

布局通用类(Utilities for layout)

布局通用类(Utilities)有时翻译为布局实用程序,为了更快地实现移动友好和响应式开发,Bootstrap 包含数十个实用程序类,用于显示、隐藏、对齐和间隔内容。

更改 display

使用我们的display 实用程序,可以响应式地切换 display属性的常用值。将其与我们的网格系统、内容或组件混合使用,可在特定视口中显示或隐藏它们。

Flexbox 选项

Bootstrap 是使用 flexbox 构建的,但并非每个元素的 display 都已更改为 display: flex ,因为这会增加许多不必要的重载,并意外改变关键的浏览器行为。我们的大多数 组件 都启用了 flexbox。

如果需要在元素中添加 display: flex,请使用 .d-flex 或响应式变体(例如 .d-sm-flex)。您需要使用该类或 display 值,以便使用我们额外的 flexbox 实用程序 来调整大小、对齐、间距等。

Margin 和 padding

使用 marginpadding 间距工具可以控制元素和组件的间距和大小。Bootstrap 为间距工具提供了一个基于 1rem 值默认值 $spacer 变量的六级刻度。您可以选择适用于所有视口的值(例如,.me-3 表示 LTR 中的margin-right: 1rem),也可以选择针对特定视口的响应变量(例如,.me-md-3 表示 margin-right: 1rem,以 LTR 格式,从 md `断点开始)。

切换 visibility

如果不需要切换 display,可以使用我们的可见性实用程序切换元素的 visibility。不可见元素仍会影响页面布局,但在视觉上会被隐藏起来,不让访客看到。