如何使用Bootstrap 3爲嵌套內聯表單元素添加寬度？

Question

我有一個奇怪的問題與表格內的列的寬度。我試圖在表單組中嵌套一個form-inline類。我想我已經嘗試過不僅在Chrome的檢查窗口中運行時更改所有內容，而且還嘗試了給出的所有回答here，here和here，但沒有得到好的結果。

這裏是我的代碼：

<form class="form-horizontal"> 

<fieldset> 

..... 

<div class="form-group"> 
    <label class="col-md-2 control-label">Tel. Celular</label> 
    <div class="col-md-10"> 
     <div class="form-inline"> 
      <!-- <div class="form-group col-sm-4"> --> 
       <label class="sr-only" for="cell_area_code">Cod. Area</label> 
       <input type="text" class="form-control" id="cell_area_code" placeholder="Cod. Area"> 
      <!-- </div> --> 
      <!-- <div class="form-group col-sm-8"> --> 
       <label class="sr-only" for="cell_number">N&uacute;mero</label> 
       <input type="text" class="form-control" id="cell_number" placeholder="N&uacute;mero"> 
      <!-- </div> --> 
     </div> 
    </div> 
</div> 

..... 

</fieldset> 

</form> 

和這裏的結果：

爲什麼不列佔據的寬度的100％？另外，如果我啓用了這些註釋div，以下是我得到的結果： ...並且寬度沒有差異...在「form-group」類的負邊距之前重疊。

這是怎麼回事？

在此先感謝！

Answer 1

你的第三行應該是這樣的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="container"> 
 
    ... 
 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label">Tel. Celular</label> 
 
    <div class="col-md-10"> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="cell_area_code">Cod. Area</label> 
 
      <input type="text" class="form-control" id="cell_area_code" placeholder="Cod. Area" /> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="form-group"> 
 
      <label class="sr-only" for="cell_number">N&uacute;mero</label> 
 
      <input type="text" class="form-control" id="cell_number" placeholder="N&uacute;mero"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    ... 
 
</div>