使用bootstrap input-group-addon会添加一个额外的行

Question

我正在尝试使用bootstrap的input-group-addon，但是使用它会将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-*添加到输入组。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;