Bootstrap/docs/4.5/layout/utilities-for-layout
来自菜鸟教程
布局实用程序
为了更快地进行适合移动设备的响应式开发,Bootstrap包含了数十种实用程序类,用于显示,隐藏,对齐和分隔内容。
更改 display
使用我们的 显示工具 用于响应地切换 display
属性。 将其与我们的网格系统,内容或组件混合以在特定视口中显示或隐藏它们。
Flexbox选项
Bootstrap 4是使用flexbox构建的,但并非每个元素的 display
已改为 display: flex
因为这会添加许多不必要的替代,并意外更改浏览器的主要行为。 大多数 我们的组件 内置启用了flexbox。
您是否需要添加 display: flex
一个元素,用 .d-flex
或其中一种自适应变体(例如, .d-sm-flex
). 您需要这个课程或 display
允许使用我们额外的价值 flexbox实用程序 用于尺寸,对齐,间距等。
保证金和填充
使用 margin
and padding
间隔实用程序 控制元素和组件的间距和大小。 Bootstrap 4包括一个用于间隔实用程序的五级刻度,基于 1rem
默认值 $spacer
变量。 选择所有视口的值(例如, .mr-3
for margin-right: 1rem
),或选择自适应变体以定位特定的视口(例如, .mr-md-3
for margin-right: 1rem
从开始 md
断点)。
切换 visibility
切换时 display
不需要,您可以切换 visibility
与我们的元素 可见性实用程序 。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。