2017-05-06 87 views
0

enter image description here引導附加上的按鈕

我是新來引導了一點,但我不能在任何地方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> 

還是因爲我使用不同的類?但爲了讓這個對齊正確?

這就是我想要得到的。 enter image description here

將輸入組類添加到btn組時。 input-group-addon的寬度爲0。我有這樣的結果:enter image description here

僅在input-group-addon上添加寬度0時。

enter image description here

+0

你到底想幹什麼? – Rishi

回答

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>

+0

謝謝@Jeppsen。在我的結果帖子中查看我的編輯。 – Muiter

+0

@Miter。我編輯了我的答案。也許這會爲你工作。 – Jeppsen

+0

不錯!感謝您的努力@Jeppsen – Muiter