通用布局工具

为了更快地进行适合移动设备的响应式开发,Bootstrap包含了数十种通用布局工具类,用于显示,隐藏,对齐和分隔内容。

动态display

使用我们的display utilities来动态切换“ display”属性的常用值。 将其与我们的网格系统,内容或组件混合以在特定视口中显示或隐藏它们。

悬浮框选项Flexbox

Bootstrap 4是使用flexbox构建的,但是并非每个元素的“显示”都已更改为“显示:flex”,因为这会添加许多不必要的覆盖并意外地更改浏览器的主要行为。 大多数our components都是在启用flexbox的情况下构建的。

如果您需要在元素上添加“ display:flex”,请使用“ .d-flex”或一种自适应变体(例如,.d-sm-flex)。 您需要该类或display值,以允许使用我们额外的flexbox utilities进行大小调整,对齐 ,间距等。

Margin and padding

使用marginpaddingspacing utilities控制元素和组件的间距和大小。 Bootstrap 4根据“ 1rem”值默认的“ $ spacer”变量为间隔实用程序提供了一个五级刻度。 选择所有视口的值(例如,.marr-3代表“ margin-right:1rem”),或选择响应变体以特定视口为目标(例如,.mr-md-3`代表“ margin-right:1rem” 从md断点开始)。

切换visibility

如果不需要切换“显示”,则可以使用我们的visibility utilities来切换元素的“可见性” 。 不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。