ブートストラップは、アドオンのボタン

Question

に私はブートストラップに少し新しいですが、私は最後の行にアドオン与える方法マニュアルのどこにでもそれをindはすることはできません（TXTは、「センチ」です）3つの線としての寸法。

<!-- width right --> 
<div id="div_widthRight" class="form-group has-warning"> 
<label for="widthRight" class="col-sm-3 control-label">Breedte rechts</label> 
<div class="col-sm-9"> 
    <div class="input-group"> 
    <input type="number" class="form-control" id="widthRight" name="width_right" min="20" max="252" value="" data-preview="preview_hl_right" onkeyup="validate()" onclick="validate()"> 
    <span class="input-group-addon">cm</span> 
    </div> 
</div> 
</div> 

<!-- height --> 
<div id="div_height" class="form-group has-warning"> 
<label for="height" class="col-sm-3 control-label">Hoogte</label> 
<div class="col-sm-9"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button> 
    <button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button> 
    <button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button> 
    <button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button> 
    <span class="input-group-addon">cm</span> 
    </div> 
</div> 
</div> 

他のクラスを使用しているのですか？しかし、これを正しく整列させるには？

これは私が得ようとしているものです。

btn-groupに入力グループクラスを追加するとき。 入力グループ・アドオンの幅0。私はこの結果を持っています：

入力グループアドオンにのみ幅0を追加する場合。

Answer 1

私の最初の答えは、すべての解像度では正常に動作しませんでしたので、私は私の答えを編集しました。私はこれがあなたが望むものを達成する一つの方法だと思います。あなたのブートストラップクラスのいくつかを変更しました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div id="div_height" class="form-group has-warning"> 
 
    <label for="height" class="col-sm-3 control-label">Hoogte</label> 
 
    <div class="col-sm-9"> 
 
     <div class="input-group-btn"> 
 
      <span class="input-group-btn"> 
 
       <button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button> 
 
       <button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button> 
 
       <button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button> 
 
       <button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button> 
 
      </span> 
 
      <span class="input-group-addon">cm</span> 
 
     </div> 
 
    </div> 
 
</div>