Html 输入组和表单组的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36835615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between input-group and form-group
提问by Nero Vanbiervliet
What is the difference in use between the css classes input-groupand form-groupin Bootstrap?
css 类input-group和form-groupBootstrap在使用上有什么区别？
回答by Sankar Krishnamoorthy
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.
输入组是扩展的表单控件。使用输入组，您可以轻松地将文本或按钮添加到基于文本的输入中。例如，您可以根据需要添加 $ 符号、@ 作为 Twitter 用户名或其他任何内容。
Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.
表单组用于将标签和表单控件包装在一个 div 中，以获得标签和控件之间的最佳间距。
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
因此，请根据需要同时使用 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="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>回答by JoshYates1980
I am upgrading the stylesheet of a ASP.NET webforms project to bootstrap. One noticeable difference, form-group will maximize the width of the control. input-group will only use the required width. For example, a row with a column 4 width:
我正在将 ASP.NET webforms 项目的样式表升级到引导程序。一个明显的区别，form-group 将最大化控件的宽度。input-group 将只使用所需的宽度。例如，具有第 4 列宽度的行：
<div class="row">
<div class="col-md-4">
<div class="form-group">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
CssClass="form-control" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
CssClass="form-control" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
