布局通用类(Utilities)

布局通用类(Utilities)有时翻译为布局实用程序,为了更快的移动友好和响应性开发,Bootstrap包含了几十个用于显示、隐藏、对齐和间隔内容的实用程序类。

更改 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. 使用我们的显示实用程序来响应地切换display属性的公共值。将它与我们的网格系统、内容或组件混合,以便在特定的视口中显示或隐藏它们。

弹性盒子选项

Bootstrap是用flexbox构建的,但并不是每个元素的显示都被更改为display:flex,因为这将添加许多不必要的覆盖,并意外地更改关键浏览器行为。我们的大多数组件都是使用flexbox构建的。

如果需要将display:flex添加到元素中,请使用.d-flex或响应变体之一(例如.d-sm-flex)进行添加。您将需要这个类或显示值来允许使用我们额外的flexbox实用程序来调整大小、对齐、间距等。 display: flex to an element, do so with .d-flex or one of the

Margin and padding

使用“边距”和“填充间距”(margin and padding)工具可以控制元素和组件的间距和大小。Bootstrap包含一个基于$spacer变量的1rem 默认值用于间隔实用程序的六级刻度。为所有视口选择值(例如,.me-3表示右边距:1rem in LTR),或选择响应变体以针对特定视口(例如,.me-md-3表示右边距:1rem-in LTR-从md断点开始)。

切换 visibility

当不需要切换显示display时,可以使用可见性实用程序切换元素的可见性visibility。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。

返回顶部