gpt4 book ai didi

html - 输入组和表单组的区别

转载 作者:技术小花猫 更新时间:2023-10-29 11:36:18 26 4
gpt4 key购买 nike

Bootstrap中的css类input-groupform-group在使用上有什么区别?

最佳答案

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

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

因此,请根据需要同时使用 form-group 和 input-group。请将您的标签和输入包装在 form-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>

关于html - 输入组和表单组的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36835615/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com