布局建议

定义 display

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

Flexbox选项

Bootstrap是使用 display 构建的，但并非每个元素的显示都已更改为 display: flex，因为这会添加许多不必要的替代内容，并且会意外更改关键的浏览器行为。 我们的大多数组件都是在启用flexbox的情况下构建的。

如果需要将 display: flex 添加到元素中，可以使用 .d-flex 或响应变量之一(例如 .d-sm-flex)。您将需要这个类或 display 来允许使用我们额外的flexbox实用工具来调整大小、对齐、间距等。

Margin 和 padding

使用 margin 和 padding 间距实用工具 来控制元素和组件的间距和大小。 Bootstrap基于 1rem 值默认 $spacer 变量，包括六个级别的间距实用工具。 选择所有视口的值（例如， .me-3 的 margin-right: 1rem），或选择响应变量以特定窗口为目标（例如，.me-md-3 的 margin-right: 1rem（在LTR中）开始 在 md 断点处）。

切换 visibility

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