bootstrap form controls-custome widths

Question

Если я включаю <div class="input-group">, управление кажется короче, если я удалю этот div, тогда они будут exapnding. Я просто пытаюсь понять, что происходит, добавляя классы формы ввода-группы и формы в форму. Может ли кто-нибудь объяснить?

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; 
} 

Это display: table; правила Thats ответственности за сокращение <select> элемента, так как ширина таблицы определяется тем, насколько большим содержанием его имеет (по умолчанию). Содержимое «Выберите состояние» первого <option> станет его шириной.

.form-group класс позволяет элемент охватывает ширину контейнера:

Все текстовые <input>, <textarea> и <select> элементы с .form-control устанавливаются в width: 100%; по умолчанию.

Answer 2

input-group описано здесь:

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

Вам нужно их группировать входной элемент с расширением, как описано в документации. В вашем случае вы можете оставить его, так как он ограничивает ширину ваших элементов.

form-group описано здесь:

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

Wrap этикетки и элементы управления в .FORM-группы для оптимального расстояния.