html - Bootstrap 输入组内数字输入的溢出宽度

Question

要在 twitter bootstrap 中使用输入插件(输入之前/之后的标签)，应将输入添加到 .input-group 中。它在使用大多数输入类型时工作正常，但在 Firefox 中的number inputs 情况下则不然。当父项太窄时，输入组会溢出其父项的宽度。这个问题似乎只出现在 Firefox 中。

.content {
  padding: 20px;
  width: 250px;
}
.form-group {
  background: grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="content">

  <div class="form-group">
    <label for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="number">
      <div class="input-group-addon">.00</div>
    </div>
  </div>

  <div class="form-group">
    <label for="exampleInputAmount">Amount (in dollars)</label>
    <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="number">
  </div>

  <div class="form-group">
    <label for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text">
    </div>
  </div>

  <div class="form-group">
    <label for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text">
      <div class="input-group-addon">.00</div>
    </div>
  </div>

</div>

Answer 1

我发现这个问题只存在于Firefox Developer Edition中，所以它可能会在未来的版本中得到修复。