如何在Bootstrap中使用Spacing Utility类 [英] How do I use the Spacing Utility Classes in Bootstrap
问题描述
在此文章中,我看到了Bootstrap 4 Spacing Utility类,他在 className
中使用 mb-lg
.
In this article I saw Bootstrap 4 Spacing Utility Classes, and he uses m-b-lg
in className
.
<div class="row">
<div class="col-sm-6 m-b-lg">
<!-- column-small-50%, margin-bottom-large -->
</div>
</div>
但是当我在带有响应的meteorjs上使用它时,什么也没有发生.我是否缺少某些东西或缺少插件?
But when I use it on meteorjs with react nothing happens. Am I missing something or missing a plugin?
<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)文档.
Refer to the Spacing (Bootstrap v4 alpha) documentation.
使用以下格式命名这些类: {property}-{sides}-{size}
The classes are named using the format: {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
.
Where size is one of: *
0
- for classes that eliminate themargin
orpadding
by setting it to0 * 1
- (by default) for classes that set the margin or padding to$spacer-x
or$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
.
这篇关于如何在Bootstrap中使用Spacing Utility类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!