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

How do I use the Spacing Utility Classes on Bootstrap 4

提问by phongyewtong

In this articleI saw Bootstrap 4 Spacing Utility Classes, and he uses m-b-lgin className.

在这篇文章中，我看到了 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>

But when I use it on meteorjs with react nothing happens. Am I missing something or missing a plugin?

但是当我在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>

采纳答案by Bass Jobsen

Refer to the Spacing(Bootstrap v4 alpha) documentation.

请参阅间距（Bootstrap v4 alpha）文档。

The classes are named using the format: {property}-{sides}-{size}

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

Where size is one of: * 0- for classes that eliminate the marginor paddingby 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.5or $spacer-y * 1.5 * 3- (by default) for classes that set the margin or padding to $spacer-x * 3or $spacer-y * 3.

其中 size 是以下之一： * 0- 对于消除marginorpadding的类，通过将其设置为0 * 1- （默认情况下）对于将边距或填充设置为$spacer-xor $spacer-y * 2- （默认情况下）对于将边距或填充设置为$spacer-x * 1.5or $spacer-y * 1.5 * 3- (默认情况下）用于将边距或填充设置为$spacer-x * 3or 的类$spacer-y * 3。

So use m-t-3instead of m-t-lg.

所以使用m-t-3代替m-t-lg.

回答by Zim

Update 2020 Bootstrap 4

更新 2020 Bootstrap 4

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

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

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

• 边距：m{sides}-{size}
• 填充：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

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

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

现在有6 种尺寸(0-5) 代表标准.5rem垫片单元的一部分。此外，还添加了x 轴（左/右）和y 轴（顶部/底部）实用程序：

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

my-2= 上下
mx-0边距2 个间距单位= 左右无边距 = 左右
px-3填充 3 个间距单位

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

而且，间距实用程序现在可以响应。xs不使用断点时，隐含最小断点。

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

• 边距：m{sides}-{breakpoint}-{size}
• 填充：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)

mt-md-2= 边距顶部 2 个间距单位，在md（和向上）
py-sm-0= 没有填充顶部和底部，在sm（和向上）

Bootstrap 4 Spacing Utils Demo

Bootstrap 4 Spacing Utils 演示

---

---

Related: Bootstrap 4 spacing bug?

相关：Bootstrap 4 间距错误？

回答by phongyewtong

Basically its only works from 0 to 3. m-t-0, m-t-1, m-t-2, or m-t-3

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