引导表单控件 - 自定义宽度

Question

如果我包含<div class="input-group">控件似乎更短，如果我删除此div，那么它们就会消失。我只是想通过向表单添加输入组和表单组类来了解正在发生的事情。有人可以解释一下吗？

http://jsfiddle.net/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 -->

Answer 1

.input-group类具有以下规则：

.input-group {
    display: table;
    position: relative;
    border-collapse: separate;
}

负责

缩短<select>元素的是display: table;规则，因为表格的宽度取决于它包含的内容量(默认情况下(。第一个<option>的内容"选择状态"将成为其宽度。

.form-group类允许元素跨越其容器的宽度：

默认情况下，所有带有.form-control的文本<input>、<textarea> 和 <select> 元素都设置为 width: 100%;。

Answer 2

input-group描述

如下：

• http://getbootstrap.com/components/#input-groups

您需要它们来对具有扩展名的输入元素进行分组，如文档中所述。在您的情况下，您可以省略它，因为它只会限制您的元素宽度。

form-group描述如下：

• http://getbootstrap.com/css/#forms

将标签和控件换行在 .form-group 中以获得最佳间距。