如何在 Bootstrap 中使用间距实用程序类

Posted 2023-03-06

【中文标题】如何在 Bootstrap 中使用间距实用程序类

【英文标题】：How do I use the Spacing Utility Classes in Bootstrap

【发布时间】：2016-05-23 15:18:17

【问题描述】：

在这个article 中，我看到了Bootstrap 4 Spacing Utility Classes，他在className 中使用了m-b-lg。

<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

但是当我在 meteorjs 上使用它时，什么反应都没有。我是否缺少某些东西或缺少插件？

<div className="container-fluid">
    <div className="col-xs-6 col-xs-offset-3 m-t-lg">
        <h1 className="text-xs-center"> Login </h1>
        <form>
            <div className="form-group">
                <input type="email" className="form-control" id="inputEmail" placeholder="Email"/>
            </div>
            <div className="form-group">
                <input type="password" className="form-control" id="inputPassword" placeholder="Password"/>
                <p className="text-xs-center"><a href="/signup"> Forgot your email or password?</a></p>
            </div>      
            <div className="form-group">
                <button className="btn btn-primary btn-block" type="submit"> Login </button>
                <p className="text-xs-center"> New to Arcademy? <a href="/signup"> Sign up now.</a></p>
            </div>
        </form>
    </div>
</div>

【参考方案1】：

Bootstrap 5 测试版 - 2021 年更新

现在 Bootstrap 5 支持 RTL，left 和 right 的概念已更改为 start 和 end。因此*l- 和*r- 间距实用程序已更改

pl-* = ps-*pr-* = pe-*ml-* = ms-*pr-* = me-*

Bootstrap 4 - 更新 2020

自原始答案以来的 Bootstrap 4 spacing utils have changed（适用于 v4 alpha）。现在语法很简单：

边距：

msides-size

填充：

psides-size

示例..

mb-2 = 底部边距 2 个间隔单位m-0 = 无边距pt-3 = 顶部填充 3 个间隔单位p-1 = 向所有边填充 1 个间隔单位

现在有 6 种尺寸 (0-5) 代表标准.5rem 间隔单元的一部分。此外，还添加了 x 轴（左/右）和 y 轴（上/下）实用程序：

my-2 = 上边距和下边距 2 个间隔单位mx-0 = 左右没有边距px-3 = 左右填充 3 个间隔单位

而且，间距工具现在具有响应性。不使用断点时，会隐含最小的xs 断点。

边距：

msides-breakpoint-size

填充：

psides-breakpoint-size

mt-md-2 = 上边距顶部 2 个间距单位，md（及以上）py-sm-0 = 无填充顶部和底部，sm（及以上）

Bootstrap 4 Spacing Utils Demo

---

相关：Bootstrap 4 spacing bug?

【讨论】：

我没有在文档中看到任何提到使用多个类的内容。例如 p-3 pb-1 似乎只识别 p3 间距，尽管 pb-1 类在 p-3 声明之后出现。这应该支持吗？

看到这个答案：***.com/questions/44025566/bootstrap-4-spacing-bug/…

【参考方案2】：

请参阅Spacing（Bootstrap v4 alpha）文档。

类使用以下格式命名：property-sides-size

其中 size 是以下之一： * 0 - 用于消除 margin 的类 或 padding 将其设置为 0 * 1 -（默认情况下）对于那些 将边距或填充设置为$spacer-x或$spacer-y * 2 - （通过 默认）用于将边距或内边距设置为 $spacer-x * 1.5 或 $spacer-y * 1.5 * 3 的类 -（默认情况下）用于将边距或内边距设置为 $spacer-x * 3 或 $spacer-y * 3 的类。

所以使用m-t-3 而不是m-t-lg。

【讨论】：

我使用 m-t-100 没有任何变化。

你应该使用m-t-1、m-t-2或m-t-3

官方 Boostrap 4.0 间距文档是 here（尽管在发表此评论时仍处于测试阶段）。

也许是我，但文档看起来很棒且完整。直到你尝试使用它。 Bootstrap 很棒，为我们所有人构建和维护它的努力是巨大的。文档也付出了很多努力，但有些是由知道答案但不需要它的人完成的，或者是由被告知答案应该是什么但不理解的人完成的。例如，在这种情况下，文档是否告诉我添加 CSS 以支持这些实用程序？或者向我展示 CSS 已经定义了什么？如果你通读整页，上下文就不清楚了。

【参考方案3】：

基本上它只适用于 0 到 3.m-t-0、m-t-1、m-t-2 或 m-t-3