この中で 記事 私はBootstrap 4 Spacing Utility Classesを見て、彼は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でそれを使用して反応しても何も起こりません。何か見当たらない、またはプラグインがありませんか?
<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}
サイズは次のいずれかです。*
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
を使用します。
2018年に更新Bootstrap 4
Bootstrap 4 spacing utils has changed 元の答え(v4 alphaの場合)以降。=構文は単純です:
例..
mb-2
=マージン下部2間隔単位m-0
=マージンなしpt-3
=上位3つのスペース単位のパディングp-1
=すべての辺にパディング1間隔単位
現在、標準の.5rem
スペーサーユニットの一部を表す6サイズ(0-6)があります。さらに、x-axis(left/right)およびy-axis (上/下)utilsが追加されました:
my-2
=上部と下部の2つのスペース単位のマージンmx-0
=左右にマージンなしpx-3
=左右3つのスペース単位のパディング
また、間隔ユーティリティが応答するようになりました。ブレークポイントが使用されていない場合、最小のxs
ブレークポイントが暗示されます。
mt-md-2
= md
(および上)のマージンの上位2間隔py-sm-0
=上下にパディングなし、sm
(上)
Bootstrap 4 Spacing Utils Demo
関連: ブートストラップ4の間隔のバグ?
基本的には、0〜3でのみ動作します。m-t-0、m-t-1、m-t-2、またはm-t-3