更改 display
使用我们的显示工具来响应式切换display属性的常用值。将其与我们的网格系统、内容或组件结合使用,以便在特定视口中显示或隐藏它们。
Flexbox 选项
Bootstrap 是使用 Flexbox 构建的,但并非每个元素的 display 都已更改为 display: flex,因为这样会增加许多不必要的覆盖,并意外改变关键的浏览器行为。我们的大多数 组件 都是启用 Flexbox 构建的。
如果你需要向元素添加 display: flex,请使用 .d-flex 或其中一个响应式变体(例如 .sm:d-flex)。你将需要这个类或 display 值,以便使用我们的额外 flexbox 工具 来处理尺寸、对齐、间距等。
外边距和内边距
使用 边距 和 填充 用于控制元素和组件的间距和大小的工具。Bootstrap 包含一个基于默认值的 13 步间距工具规模。 $spacer 的价值 1rem. 为所有视口选择数值(例如, .me-5 为了 margin-inline-end: 1rem),或使用响应式变体来针对特定的视口(例如, .md:me-5 从……开始 md 断点)。
切换 visibility
切换时 display 不需要,你可以切换 visibility 与我们的一个元素 可见性工具不可见元素仍然会影响页面布局,但对访客来说是视觉上隐藏的。