布局工具

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

改变 display

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

Flexbox 选项

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

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

边距和填充

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

切换 visibility

不需要切换 display 时，可以使用可见性实用程序 切换元素的 visibility。不可见的元素仍然会影响页面的布局，但在视觉上对访问者是隐藏的。