.input-group-addon（Bootstrap3）で.input-groupの入力サイズを制御する方法は？

Question

Aはテーブルにフォームを持ち、すべてのフィールドサイズがうまく適合しています。しかし、私は1つの日付フィールドを持っています。入力グループアドオン、それは非常にうまく動作しないサイズコントロールを作っている。それを修正する方法はありますか？

は私が小さい入力をするためにいくつかの方法を試してみましたが、アドオンが取り付けられている停止： http://jsfiddle.net/93MpC/1/

フィドルからコード：

<div class="table-responsive"> 
<table class="table table-bordered"> 
    <tr class="form-group"> 
    <td><label class="field-label required-field">Name:</label></td> 
    <td><div class="input-group"> 
     <input type="text" name="name" required id="id_name" class="form-control"> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"> 
     <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
    <td><label class="field-label">Birthdate:</label></td> 
    <td><div class="input-group"><div class="row"> 
     <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
    </div></td> 
    </tr> 
    <tr class="form-group"> 
     <td><label class="field-label">Birthdate:</label></td> 
     <td><div class="input-group"> 
     <div class="row"> 
      <div class="col-lg-3"> 
      <div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div> 
      <div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div> 
      </div> 
      </div> 
     </div></td> 
    </tr> 
</table> 
</div> 

感謝を事前に！

Answer 1

このrequiの適切なHTML別のレベルのネスティングをします。詳細は、input groupsのドキュメントを参照してください。あなたのサイズの入力やアドオンと

<td>は次のようになります。それが問題だ場合は、CSSの少しでそれを取り除くことができるように

<td class="row"> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</td> 

.col-*クラスは、左右のパディングを追加します。

Answer 2

あなたのコードからは、クラスdivを親divに追加しました。

<div class="input-group half"><!-- here is .half --> 
    <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

編集それともCOLを使用したい場合は、ここでは異なるオプションがあります：：

.half { 
    width: 50%; 
} 

そしてHTML（ほぼ同じ）：ここでは、CSSです

<div class="row"> 
    <div class="col-md-3"> 
    <div class="row"> 
     <div class="col-md-3">Birthdate:</div> 
     <div class="col-md-9"> 
     <div class="input-group"> 
      <input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/> 
      <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Example