Skip to main content Skip to docs navigation

布局工具

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

改变 display

¥Changing display

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

¥Use our display utilities for responsively toggling common values of the display property. Mix it with our grid system, content, or components to show or hide them across specific viewports.

弹性盒选项

¥Flexbox options

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

¥Bootstrap is built with flexbox, but not every element’s display has been changed to display: flex as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of our components are built with flexbox enabled.

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

¥Should you need to add display: flex to an element, do so with .d-flex or one of the responsive variants (e.g., .d-sm-flex). You’ll need this class or display value to allow the use of our extra flexbox utilities for sizing, alignment, spacing, and more.

外边距和填充

¥Margin and padding

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

¥Use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a 1rem value default $spacer variable. Choose values for all viewports (e.g., .me-3 for margin-right: 1rem in LTR), or pick responsive variants to target specific viewports (e.g., .me-md-3 for margin-right: 1rem —in LTR— starting at the md breakpoint).

切换 visibility

¥Toggle visibility

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

¥When toggling display isn’t needed, you can toggle the visibility of an element with our visibility utilities. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.