25

在这篇文章中，我看到了 Bootstrap 4 Spacing Utility Classes，他m-b-lg在className.

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

3 回答 3

82

Bootstrap 5 测试版 - 2021 年更新

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

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

引导程序 4-更新 2020

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

  • 边距： m{sides}-{size}
  • 填充： p{sides}-{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不使用断点时，隐含最小断点。

  • 边距： m{sides}-{breakpoint}-{size}
  • 填充： p{sides}-{breakpoint}-{size}

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

Bootstrap 4 间距实用程序演示

相关：Bootstrap 4 间距错误？

于 2017-03-22T18:52:51.050 回答
11

请参阅间距（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.

于 2016-02-14T14:12:42.913 回答
5

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

于 2016-02-16T03:48:41.150 回答