布局实用工具

为了实现更快速、更适合移动设备且响应式的发展，Bootstrap 包含了数十个实用工具类，用于显示、隐藏、对齐和设置内容间距。

更改 display

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

Flexbox 选项

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

如果您需要向元素添加 display: flex，请使用 .d-flex 或其中一个响应式变体（例如 .d-sm-flex）执行此操作。您需要此类或 display 值才能使用我们的额外 flexbox 实用工具 来调整大小、对齐、间距等。

边距和内边距

使用 margin 和 padding 间距实用工具 来控制元素和组件的间距和大小。Bootstrap 4 包含一个基于 1rem 值默认 $spacer 变量的五级间距实用工具比例。为所有视口选择值（例如 .mr-3 表示 margin-right: 1rem），或选择响应式变体以针对特定视口（例如 .mr-md-3 表示从 md 断点开始的 margin-right: 1rem）。

切换 visibility

当不需要切换 display 时，您可以使用我们的 可见性实用工具 来切换元素的 visibility。不可见的元素仍会影响页面的布局，但对访客来说是视觉上隐藏的。