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 方向中为 margin-right: 1rem 使用 .me-3),或者选择响应式变体以针对特定视口(例如,从 md 断点开始,LTR 方向中为 margin-right: 1rem 使用 .me-md-3)。

🌐 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.