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

Question

在本文中,我看到了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>

Answer 1

更新2018 Bootstrap 4

自原始答案(对于v4 alpha),Bootstrap 4 间距工具已更改.现在语法很简单:

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

例子..

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

现在有6种尺寸(0-6)代表标准.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 Spacing Utils Demo

相关:Bootstrap 4间距bug？

Answer 2

请参阅间距(Bootstrap v4 alpha)文档.

这些类使用以下格式命名: {property}-{sides}-{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.

Answer 3

基本上，它只能在0到3之间工作。mt-0，mt-1，mt-2或mt-3