改变 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
使用 margin
和 padding
间距实用程序 控制元素和组件的间距和大小。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.