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