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

How do I use the Spacing Utility Classes in Bootstrap

本文关键字：实用程序引导程序更新时间：2023-09-26

在本文中，我看到了 Bootstrap 4 间距实用程序类，他在 className 中使用了 m-b-lg。

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

但是当我在流星上使用它时，没有任何反应。我错过了什么或缺少插件吗？

<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>

引导程序 5 测试版 - 2021 年更新

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

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

引导程序 4 -更新 2020

自原始答案(对于 v4 alpha(以来，Bootstrap 4 间距实用程序已更改。现在语法很简单：

边距：M{边}-{大小}
填充：P{边}-{大小}

例子。。

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。

距：m{边}-{断点}-{大小}
填充： p{边}-{断点}-{大小}

mt-md-2 = 边距前 2 个间距单位，在md(及以上(
py-sm-0 = 没有填充顶部和底部，在sm(和向上(

引导程序 4 间距实用程序演示