В чем разница между тегами <input-group>
и <form-group>
?
Разница между группой ввода и группой форм
Ответ 1
Группы ввода - расширенные элементы управления формой. Используя группы ввода, вы можете легко добавить и добавить текст или кнопки в текстовые входы. Например, вы можете добавить символ $, @для имени пользователя Twitter или что-либо еще по мере необходимости.
Группы форм используются для обертывания меток и управления формой в div, чтобы получить оптимальное расстояние между меткой и элементом управления.
Поэтому используйте как форму, так и группу ввода, как требуется. Упакуйте свой ярлык и ввод в тег группы форм. Если какое-либо из полей ввода необходимо добавить/добавить с помощью кнопки text/button, оберните элемент управления с помощью группы ввода. Ниже приведен пример, объединяющий оба из них. Надеюсь, что это поможет
<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>
Ответ 2
Я обновляю таблицу стилей проекта веб-форм ASP.NET для начальной загрузки. Одна заметная разница, форма-группа максимизирует ширину элемента управления. 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>