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

Question

在这个article中我看到了Bootstrap 4 Spacing Utility 类，他在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>

Answer 1

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

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

Where size is one of: * 0 - for classes that eliminate the margin or padding by setting it to 0 * 1 - (by default) for classes that set the margin or padding to $spacer-xor $spacer-y * 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5 * 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3.

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

Answer 2

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

Answer 3

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）。现在语法很简单：

边距：米{边}-{尺寸}
填充： p{sides}-{size}

示例..

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

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

my-2 = margin top & bottom 2 spacing units
mx-0 = 左右无边距
px-3 = 左右填充 3 个间距单位

而且，间距实用程序现在可以响应了。不使用断点时，隐含最小 xs 断点。

边距： m{边}-{断点}-{尺寸}
填充： p{sides}-{breakpoint}-{size}

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

Bootstrap 4 Spacing Utils Demo

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

How do I use the Spacing Utility Classes in Bootstrap

javascript

css

meteor

bootstrap-4

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

How do I use the Spacing Utility Classes in Bootstrap

javascript

css

meteor

bootstrap-4

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