问题描述
限时送ChatGPT账号..如果我包含 <div class="input-group">
控件似乎更短,如果我删除这个 div 那么它们就会扩展.我只是想通过向表单添加输入组和表单组类来了解发生了什么.有人能解释一下吗?
http://jsfiddle/dUG4f/3/
<div class="col-xs-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">应用信息</h3></div><div class="panel-body"><div class="row"><div class="col-lg-6 col-lg-6"><div class="form-group"><label for="text" >合约状态</label><div class="input-group"><select name="State" id="State" class="validate[required] form-control"><option value="">Choose a State</option><option value="IL">伊利诺伊州</option><option value="MN">明尼苏达</option><option value="WI">威斯康星州</option></选择><div class="form-group"><label for="text" >申请号</label><div class="input-group"><input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber"/>
<!-- col-lg-6 col close -->
<!-- 行关闭-->
<!-- 面板主体结束--></div><!-- 面板结束-->
<!-- 结束 col-xs-6 --><div id ="panel2" class="col-xs-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">初始溢价</h3></div><div class="panel-body">
</div><!-- 第二行结束-->
解决方案 .input-group
类有以下规则:
.input-group {显示:表;位置:相对;边框折叠:分开;}
display: table;
规则负责缩短 元素,因为表格的宽度取决于它有多少内容(默认情况下)).第一个
的内容Choose a State"成为它的宽度.
.form-group
类让元素跨越宽度其容器:
所有文本 、
和
元素,带有
.form-control
默认设置为 width: 100%;
.
If I include <div class="input-group">
control seems shorter, if I remove this div then they are exapnding. I am just trying to understand what is happening by adding input-group and form-group classes to the form. Could someone explain ?
http://jsfiddle/dUG4f/3/
<div class="row">
<div class="col-xs-6">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Application Information</h3></div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 col-lg-6">
<div class ="form-group">
<label for="text" >Contract State</label>
<div class="input-group">
<select name="State" id="State" class="validate[required] form-control">
<option value="">Choose a State</option>
<option value="IL">Illinois</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</div>
</div>
<div class ="form-group">
<label for="text" >Application Number</label>
<div class="input-group">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
</div>
</div> <!-- col-lg-6 col close -->
</div> <!-- row close -->
</div> <!-- End of panel Body -->
</div><!-- End of panel -->
</div> <!-- end col-xs-6 -->
<div id ="panel2" class="col-xs-6">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Initial Premium</h3></div>
<div class="panel-body">
</div>
</div>
</div>
</div><!-- End of second row -->
解决方案
The .input-group
class has the following rules:
.input-group {
display: table;
position: relative;
border-collapse: separate;
}
It's the display: table;
rule thats responsible for shortening the <select>
element, since a table's width is determined by how much content it has (by default). The content "Choose a State" of the first <option>
becomes its width.
The .form-group
class lets an element span the width of its container:
All textual
<input>
,<textarea>
, and<select>
elements with.form-control
are set towidth: 100%;
by default.
这篇关于引导程序表单控件 - 自定义宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论