ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 如何在Bootstrap 4上使用Spacing Utility类

2019-09-18 10:34:08  阅读:210  来源: 互联网

标签:html javascript css meteor bootstrap-4


在这个article中,我看到了Bootstrap 4 Spacing Utility Classes,他在className中使用了m-b-lg.

<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}

Where size is one of: * 0 – for classes that eliminate the margin
or padding by 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.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.

标签:html,javascript,css,meteor,bootstrap-4
来源: https://codeday.me/bug/20190918/1811033.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有