当设置了“width:auto”时，引导程序“input group addon”远离输入

Question

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST">
<div class="form-group">
  <label class="col-sm-2 control-label" for="input1">Field 1</label>
  <div class="col-sm-10 input-group">
    <input style="width:auto" id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">
    <span class="input-group-addon">sm<sup>3</sup></span>
  </div>
</div>
</form>

如何使输入组插件出现在输入附近？

Answer 1

之所以会发生这种情况，是因为Bootstrap希望输入填充"剩余空间"。如果要调整文本字段的宽度，则应更改.input-group的宽度，而不是输入。

例如：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<form id="form1" class="well form-horizontal" action="/base_url/update" method="POST">
  <div class="form-group" style="width: 200px">
    <label class="col-sm-2 control-label" for="input1">Field 1</label>
    <div class="col-sm-10 input-group">
      <input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">
      <span class="input-group-addon">sm<sup>3</sup></span>
    </div>
  </div>
</form>

Answer 2

从元素中删除style="width:auto"

<input id="input1" min="0" name="input1" class="form-control" maxlength="20" value="0" type="number">

Bootstrap无论如何都会为您处理这个问题，所以没有理由将其内联。：(