javascript – 如何在Bootstrap 4上使用Spacing Utility类

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

解决方法:

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

标签：html,javascript,css,meteor,bootstrap-4
来源： https://codeday.me/bug/20190918/1811033.html