Twitter Bootstrap流體容器，包括最大寬度元素

Question

簡單問題：我想看看內部元素的寬度最大化。
P.S.我正在使用Twitter Bootstrap 3.3.0。它支持。容器流體

<div class="row form-group form-inline"> 
    <div class="container-fluid"> 
     <input type="text" class="form-control" name="1"> 
     <input type="text" class="form-control" name="2"> 
     <input type="text" class="form-control" name="3"> 
    </div> 
</div> 

元素似乎沒問題，我只是希望他們每個人都與他們的寬度共享行的％33.3。
附加信息：我不想試試下面的例子中，因爲有這麼大的空間在此先感謝

之間

<div class="row form-group form-inline"> 
    <div class="container-fluid"> 
     <div class="col-sm-2"> 
     <input type="text" class="form-control" name="1"> 
     </div> 
     <div class="col-sm-2"> 
     <input type="text" class="form-control" name="2"> 
     </div> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control" name="3"> 
     </div> 
    </div> 
</div> 

。

Answer 1

將col-sm-xx直接添加到輸入字段將不起作用，因爲引導程序本身將覆蓋寬度爲width:auto。

您需要將輸入置於列中。對於父容器的33%，它是col-sm-4。此外，輸入需要100% width來填充整個列。

.form-inline [class*=col] { 
 
    padding: 0; 
 
} 
 
.form-inline input.form-control { 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row form-group form-inline"> 
 
    <div class="container-fluid"> 
 
     <div class="col-sm-4"> 
 
     <input type="text" class="form-control" name="1"> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <input type="text" class="form-control" name="2"> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" class="form-control" name="3"> 
 
     </div> 
 
    </div> 
 
</div>