布局工具
为了更快地进行适合移动设备的响应式开发,Bootstrap包含了数十种实用程序类,用于显示,隐藏,对齐和分隔内容。
在本页面
改变 display
使用我们的display 实用程序 来响应地切换display
属性的公共值。将它与我们的网格系统、内容或组件混合,以便在特定的视口中显示或隐藏它们。
Flexbox 选项
Bootstrap是用flexbox构建的,但并不是每个元素的display
都被更改为display: flex
,因为这将添加许多不必要的覆盖,并意外地更改主流浏览器行为。我们的大多数 组件都是在启用flexbox的情况下构建的。
如果需要将display: flex
添加到元素中,请使用.d-flex
或其中一种响应式变体(例如 .d-sm-flex
)进行添加。您将需要这个类或display
值来允许使用我们额外的 flexbox 实用程序来调整大小、对齐、间距等。
边距和填充
使用margin
和 padding间距工具
可以控制元素和组件的间距和大小。 Bootstrap包含一个基于1rem
默认值 $spacer
变量的用于间隔实用程序的六级刻度。选择所有视口的值 (例如在LTR,.me-3
表示 margin-right: 1rem
),或选择响应变体以针对特定视口(例如 在 LTR, .me-md-3
表示 margin-right: 1rem
,从 md
断点开始)。
切换visibility
当不需要切换display
时,可以使用 可见性实用程序切换元素的visibility
。不可见的元素仍然会影响页面的布局,但在视觉上对访问者是隐藏的。