如何在 Bootstrap 中使用间距实用程序类 [英] How do I use the Spacing Utility Classes in Bootstrap

查看：19
本文介绍了如何在 Bootstrap 中使用间距实用程序类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这篇文章中，我看到了 Bootstrap 4 Spacing Utility Classes，他在className中使用了mb-lg.

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

但是当我在meteorjs上使用它并反应时什么也没有发生.我是否遗漏了什么或遗漏了什么插件?

<div className="col-xs-6 col-xs-offset-3 m-t-lg"><h1 className="text-xs-center">登录<表格><div className="form-group"><input type="email" className="form-control" id="inputEmail" placeholder="Email"/>
<div className="form-group"><input type="password" className="form-control" id="inputPassword" placeholder="密码"/><p className="text-xs-center"><a href="/signup">忘记了您的电子邮件或密码?</a></p>

<div className="form-group"><button className="btn btn-primary btn-block" type="submit">登录</button><p className="text-xs-center">初次接触 Arcademy?<a href="/signup">立即注册.</a></p>

</表单>

解决方案

参考Spacing(Bootstrap v4 alpha)文档.

这些类使用以下格式命名:{property}-{sides}-{size}

<块引用>

其中 size 是以下之一: * 0 - 对于消除 margin 的类或 padding 通过将其设置为 0 * 1 -(默认情况下)对于将边距或填充设置为 $spacer-x 或 $spacer-y * 2 - (通过default) 对于将边距或填充设置为 $spacer-x * 的类1.5 或 $spacer-y * 1.5 * 3 -(默认情况下)用于将边距或填充设置为 $spacer-x * 3 或 <代码>$spacer-y * 3.

所以使用 m-t-3 而不是 m-t-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>

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>

解决方案

Refer to the Spacing (Bootstrap v4 alpha) documentation.

The classes are named using the format: {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.

So use m-t-3 instead of m-t-lg.

这篇关于如何在 Bootstrap 中使用间距实用程序类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆