引导附加上的按钮

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组时。 input-group-addon的宽度为0。我有这样的结果：

仅在input-group-addon上添加宽度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>