引导程序表单控件 - 自定义宽度 [英] bootstrap form controls- custome widths

查看:35
本文介绍了引导程序表单控件 - 自定义宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果我包含 <div class="input-group"> 控件似乎更短,如果我删除这个 div 那么它们就会扩展.我只是想通过向表单添加输入组和表单组类来了解发生了什么.有人能解释一下吗?

http://jsfiddle.net/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; 规则负责缩短