布局通用类(Utilities for layout)
布局通用类(Utilities)有时翻译为布局实用程序,为了更快地实现移动友好和响应式开发,Bootstrap 包含数十个实用程序类,用于显示、隐藏、对齐和间隔内容。
On this page
更改 display
使用我们的display 实用程序,可以响应式地切换 display
属性的常用值。将其与我们的网格系统、内容或组件混合使用,可在特定视口中显示或隐藏它们。
Flexbox 选项
Bootstrap 是使用 flexbox 构建的,但并非每个元素的 display
都已更改为 display: flex
,因为这会增加许多不必要的重载,并意外改变关键的浏览器行为。我们的大多数 组件 都启用了 flexbox。
如果需要在元素中添加 display: flex
,请使用 .d-flex
或响应式变体(例如 .d-sm-flex
)。您需要使用该类或 display
值,以便使用我们额外的 flexbox 实用程序 来调整大小、对齐、间距等。
Margin 和 padding
使用 margin
和 padding
间距工具可以控制元素和组件的间距和大小。Bootstrap 为间距工具提供了一个基于 1rem
值默认值 $spacer
变量的六级刻度。您可以选择适用于所有视口的值(例如,.me-3
表示 LTR 中的margin-right: 1rem),也可以选择针对特定视口的响应变量(例如,
.me-md-3 表示
margin-right: 1rem,以 LTR 格式,从
md `断点开始)。
切换 visibility
如果不需要切换 display
,可以使用我们的可见性实用程序切换元素的 visibility
。不可见元素仍会影响页面布局,但在视觉上会被隐藏起来,不让访客看到。