使用引導輸入組addon添加額外的行

Question

我想使用bootstrap的input-group-addon，但使用它將插件作爲額外的行放在輸入字段下面。

例如這樣的代碼：

<div class="form-group"> 
    <label for="tankDiameter">Tank Diameter:</label> 
    <input type="number" min="0" id="tankDiameter" name="tankDiameter" class="form-control" ng-model="tankFormCtrl.tank.diameter" placeholder="Tank diameter in cm" ng-keyup="tankFormCtrl.calculateValues()" required> 
    <span class="input-group-addon">cm</span> 
</div> 

將導致：

Answer 1

裹兩個類input-group，使得它們是內聯的內部輸入。如果要控制輸入框的大小，請將網格類col-xs-*添加到輸入組中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="form-group"> 
 
    <label for="tankDiameter">Tank Diameter:</label> 
 
    <div class="input-group col-xs-4"> 
 
    <input type="number" min="0" id="tankDiameter" name="tankDiameter" class="form-control" ng-model="tankFormCtrl.tank.diameter" placeholder="Tank diameter in cm" ng-keyup="tankFormCtrl.calculateValues()" required> 
 
    <span class="input-group-addon">cm</span> 
 
    </div> 
 
</div>