25

この記事では、Bootstrap 4 Spacing Utility Classes を見ました。彼はm-b-lginを使用していclassNameます。

<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

しかし、react を使用して 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>
4

3 に答える 3

11

Spacing (Bootstrap v4 alpha) のドキュメントを参照してください。

クラスは、次の形式を使用して名前が付けられます。{property}-{sides}-{size}

size は次のいずれかです: * - or0を削除するクラスの場合 - (デフォルト) マージンまたはパディングをorに設定するクラスの場合 - (デフォルト) マージンまたはパディングをorに設定するクラスの場合- (マージンまたはパディングをまたはに設定するクラスの場合。marginpadding0 * 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ます。

于 2016-02-14T14:12:42.913 に答える
5

基本的には 0 から 3 までしか機能しません。mt-0、mt-1、mt-2、または mt-3

于 2016-02-16T03:48:41.150 に答える