Ner*_*iet 46 html twitter-bootstrap twitter-bootstrap-3
标签input-group和使用之间有什么区别form-group？
小智 56
输入组是扩展的表单控件.使用输入组,您可以轻松地在文本输入中添加和附加文本或按钮.例如,您可以根据需要为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>