Source

布局实用程序

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

改变display

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

弹性盒选项

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

如果您需要添加display: flex到元素,请使用.d-flex响应变体之一(例如,.d-sm-flex)。您将需要此类或display值来允许使用我们额外的flexbox 实用程序来调整大小、对齐、间距等。

边距和填充

使用marginpadding 间距实用程序来控制元素和组件的间距和大小。Bootstrap 4 包括基于1rem值默认$spacer变量的五级间距实用程序。为所有视口选择值(例如,.mr-3for margin-right: 1rem),或选择响应变体以针对特定视口(例如,.mr-md-3margin-right: 1rem断点开始md)。

切换visibility

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