輸入組和表單組之間的區別

Question

在Bootstrap中，css類input-group和form-group之間有什么區別？

Answer 1

輸入組是擴展的表單控件。 使用輸入組，您可以輕松地在文本輸入中添加和附加文本或按鈕。 例如，您可以根據需要為Twitter用戶名或其他任何內容添加$符號，@。

表單組用於在div中包裝標簽和表單控件，以獲得標簽和控件之間的最佳間距。

因此，根據需要使用form-group和input-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>

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 個解決方案

解決方案1
52 已采納 2016-04-25 10:00:15

解決方案2
3 2017-01-09 15:05:55

輸入組和表單組之間的區別

問題描述

2 個解決方案

解決方案1 52 已采納 2016-04-25 10:00:15

解決方案2 3 2017-01-09 15:05:55

解決方案1
52 已采納 2016-04-25 10:00:15

解決方案2
3 2017-01-09 15:05:55