ブートストラップ3でネストされたインラインフォーム要素に幅を与えるにはどうすればよいですか？

Question

フォーム内の列の幅に奇妙な問題があります。フォームグループ内にフォームインラインクラスをネストしようとしています。私は、実行時にすべての情報を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>

が