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>

如何让input-group-addon出现在输入附近？

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无论如何都会为你处理，所以没有理由把它放在内联中。：）

当设置`width：auto`时，Bootstrap`input-group-addon`远没有输入

2 个答案: