web-dev-qa-db-ja.com

Bootstrap 4でSpacing Utility Classesを使用する方法

この中で 記事 私は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>
javascripthtmlcssmeteorbootstrap-4
18
phongyewtong

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を使用します。

8
Bass Jobsen

2018年に更新Bootstrap 4

Bootstrap 4 spacing utils has changed 元の答え（v4 alphaの場合）以降。=構文は単純です：

  • マージン：m {sides}-{size}
  • padding：p {sides}-{size}

例..

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ブレークポイントが暗示されます。

  • マージン：m {sides}-{breakpoint}-{size}
  • padding：p {sides}-{breakpoint}-{size}

mt-md-2 = md（および上）のマージンの上位2間隔
py-sm-0 =上下にパディングなし、sm（上）

Bootstrap 4 Spacing Utils Demo

関連： ブートストラップ4の間隔のバグ？

59
Zim

基本的には、0〜3でのみ動作します。m-t-0、m-t-1、m-t-2、またはm-t-3

5
phongyewtong