如何在Bootstrap 4上使用Spacing Utility类

Question

在本文中，我看到了Bootstrap 4Spacing Utility类，他m-b-lg在中使用了Bootstrap 4 Spacing Utility Classs 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

请参阅Spacing（Bootstrapv4 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。