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>