Question

在此article中，我看到了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

Update 2018 Bootstrap 4

The Bootstrap 4 spacing utils have changed since the original answer (for v4 alpha). Now the syntax is simply:

margins: m{sides}-{size}
padding: p{sides}-{size}

Examples..

mb-2 = margin bottom 2 spacing units
m-0 = no margins
pt-3 = padding top 3 spacing units
p-1 = padding all sides 1 spacing unit

There are now 6 sizes (0-6) that represent a portion of the standard .5rem spacer unit. Additionally, x-axis (left/right) and y-axis (top/bottom) utils have been added:

my-2 = margin top & bottom 2 spacing units
mx-0 = no margins left & right
px-3 = padding left & right 3 spacing units

And, the spacing utils are now responsive. The smallest xs breakpoint is implied when no breakpoint is used.

margins: m{sides}-{breakpoint}-{size}
padding: p{sides}-{breakpoint}-{size}

mt-md-2 = margin top 2 spacing units, on md (and up)
py-sm-0 = no padding top & bottom, on sm (and up)

Bootstrap 4 Spacing Utils Demo

Related: Bootstrap 4 spacing bug?

Answer 2

请参阅Spacing（Bootstrap v4 alpha）文档。

使用以下格式命名类：{property}-{sides}-{size}

大小是以下之一：* 0 - 用于消除margin的类或padding通过将其设置为0 * 1 - （默认情况下）为类将边距或填充设置为$spacer-x或$spacer-y * 2 - （by 默认情况下，对于将边距或填充设置为$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之间工作.m-t-0，m-t-1，m-t-2或m-t-3

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

3 个答案: