1. 首页
  2. 问答
  3. 自举窗体控件 - 自定义宽度

自举窗体控件 - 自定义宽度

2013-10-09 11 views
1

如果我包含<div class="input-group">控件看起来更短，如果我删除这个div，那么它们是exapnding。我只是试图通过向表单添加input-group和form-group类来了解发生了什么。有人可以解释吗？自举窗体控件 - 自定义宽度

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

来源

2013-10-09 user2088016

回答

4

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

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

这是display: table;规则多数民众赞成负责缩短<select>元素，因为表的宽度是多少内容来确定它有（默认）。第一个<option>的内容“选择状态”变为其宽度。

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

所有文本<input>，<textarea>，和<select>元件与.form-control被默认设置为width: 100%;。

来源

2013-10-09 15:31:11 Adrift

相关问题

 相关问题