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 与我们的元素 可见性实用程序 。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。