私は小さい入力フィールドを作成するために、私のCSSでこれを使用しているブートストラップ小さい入力と小さい入力-グループアドオンの問題

Question

：

.input-xs { 
    height: 22px; 
    padding: 2px 5px; 
    font-size: 12px; 
    line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */ 
    border-radius: 3px; 
} 

しかし、もちろん私もinput-group-addonを調整する必要があるか、見ていきますこのような。

これを防止してinput-group-addonを小さくするには、これを私のCSSに追加しました。

.input-group-xs > .form-control, 
.input-group-xs > .input-group-addon, 
.input-group-xs > .input-group-btn > .btn { 
    height: 22px; 
    padding: 2px 5px; 
    font-size: 12px; 
    line-height: 1.5; 
    border-radius: 3px; 
} 

これは今のようです。

任意の提案は、それが再び整列取得しますか？

完全なコード

<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']"> 
    <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')"> 
    <span class="input-group-addon">stuk</span> 
</div> 

Answer 1

私があなただったら、私は基本CSSを追加するために、「入力グループ-XS」の前にクラス名「入力グループ」を追加したいです。

.input-group { 
position: relative; 
    display: table; 
    border-collapse: separate; 
} 

だからあなたのコードは次のようになります。

<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']"> 
    <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')"> 
    <span class="input-group-addon">stuk</span> 
</div> 

あなたは自分の最も外側の `div`に.input-group``に `.FORM-group`を変更する必要が