Bootstrap5 实用工具（Utilities）

bootstrap5
布局

布局实用工具

为了更快的移动友好和响应式开发，Bootstrap包含了几十个实用类，用于显示、隐藏、对齐和间隔内容。

更改 display

使用我们的显示实用程序可以快速切换display属性的常用值。将我们的网格系统、内容或组件混合，以便在特定的视口中显示或隐藏它们。

Flexbox选项

Bootstrap是用flexbox构建的，但并不是每个元素的显示都被改为了display: flex，因为这将增加许多不必要的覆盖，并可能会改变关键的浏览器行为。大多数我们的组件在构建时都启用了flexbox。

如果你需要将display: flex添加到元素中，请使用.d-flex或响应式变体之一（例如.d-sm-flex）。你需要这个类或显示值来允许使用我们额外的flexbox实用工具来调整大小、对齐、间距等。

Margin and padding

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

切换“可见性”

当不需要切换 display时，你可以使用我们的可见性工具来切换元素的 "可见性"。不可见的元素仍然会影响页面的布局，但在视觉上对访问者是隐藏的。