Question

标签<input-group>和<form-group>之间的使用区别有何不同？

Answer 1

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

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

因此，根据需要使用form-group和input-group。包装标签并输入表格组标签。如果您的任何输入字段需要预先添加/附加文本/按钮，请使用input-group包装控件。以下是结合两者的示例。希望这有帮助

＆＃13;

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

＆＃13;

Answer 2

我正在将ASP.NET webforms项目的样式表升级到bootstrap。一个明显的区别，形式组将最大化控件的宽度。 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>

输入组和表单组之间的区别

2 个答案: