为了实现更快的移动友好和响应式开发,Bootstrap 包含许多工具类,用于显示,隐藏,对齐和间隔内容。
display
使用我们的显示工具来响应切换 display
属性的常用值。 将其与我们的栅格系统,内容或组件混合,以在特定 viewport 中显示或隐藏它们。
Bootstrap 4 是使用 flexbox 构建的,但并不是每个元素的 display
都被更改为 display: flex
,因为这会添加许多不必要的覆盖,并意外地更改关键浏览器行为。 此外,我们的大多数组件都是在启用 Flexbox 的情况下构建的。
如果需要将 display: flex
添加到元素,请使用 .d-flex
或其中一个响应式变体类(例如 .d-sm-flex
)。 你需要此类或 display
值才能使用我们额外的 flexbox 工具来调整大小,对齐,间距等。
使用边距(margin)和间距(padding)工具来控制元素和组件的间距和大小。 Bootstrap 4 包含基于 1rem
值默认 $spacer
变量的间隔工具的五级尺度。 选择所有 viewport 的值(例如,.mr-3
表示 margin-right: 1rem
),或选择响应变体以定位特定 viewport(例如,.mr-md-3
表示 margin-right: 1rem
从 md
断点开始)。
可见性
当内容不需要显示时,你可以使用我们的可见性工具切换元素的可见性。 不可见元素仍将影响页面的布局,但在视觉上对访问者隐藏。