输入组和表单组的区别 [英] Difference between input-group and form-group

查看：23
本文介绍了输入组和表单组的区别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Bootstrap中css类input-group和form-group在使用上有什么区别?

解决方案

输入组是扩展的表单控件.使用输入组，您可以轻松地将文本或按钮添加到基于文本的输入中.例如，您可以根据需要添加 $ 符号、@ 作为 Twitter 用户名或其他任何内容.

表单组用于将标签和表单控件包装在一个 div 中，以获得标签和控件之间的最佳间距.

因此，根据需要同时使用 form-group 和 input-group.一定要把你的标签和输入包装在一个表单组标签中.如果您的任何输入字段需要预先/附加文本/按钮，请使用输入组包装控件.下面是一个例子，结合了它们.希望这有帮助

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="匿名"><身体><div class="container-fluid justify-content-center"><form role="form" class="pt-3"><div class="form-group row"><label for="inputfield1" class="col-sm-2 control-label">通用输入</label><div class="col-sm-10"><input type="text" class="form-control" id="inputfield1" placeholder="通用输入..."/>

</div><!-- .form-group --><div class="form-group row"><label for="inputfield2" class="col-sm-2 control-label">货币价值</label><div class="input-group col-sm-10"><span class="input-group-prepend input-group-text">$</span><input type="text" class="form-control" id="inputfield2" placeholder="货币价值..."/><span class="input-group-append input-group-text">.00</span>

</div><!-- .form-group --><div class="form-group row"><label for="inputfield3" class="col-sm-2 control-label">用户名</label><div class="input-group col-sm-10"><span class="input-group-prepend input-group-text">@</span><input type="text" class="form-control" id="inputfield3" placeholder="用户名..."/>

</div><!-- .form-group --></表单>

What is the difference in use between the css classes input-group and form-group in Bootstrap?

解决方案

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required.

Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.

Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag. If any of your input field required to prepended/appended with text/button, wrap the control with input-group. Below is the example, combining both of them. Hope this helps

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<body>
    <div class="container-fluid justify-content-center">
        <form role="form" class="pt-3">
            <div class="form-group row">
                <label for="inputfield1" class="col-sm-2 control-label">Generic input</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Generic input..." />
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield2" class="col-sm-2 control-label">Money value</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">$</span>
                    <input type="text" class="form-control" id="inputfield2" placeholder="Money value..." />
                    <span class="input-group-append input-group-text">.00</span>
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield3" class="col-sm-2 control-label">Username</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">@</span>
                    <input type="text" class="form-control" id="inputfield3" placeholder="Username..." />
                </div>
            </div><!-- .form-group -->
        </form>
    </div>
</body>

这篇关于输入组和表单组的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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