引导输入组内数字输入的溢出宽度答案

【问题标题】：Overflowing width for number input inside bootstrap input group引导输入组内数字输入的溢出宽度
【发布时间】：2016-02-25 22:45:47
【问题描述】：

要在 twitter bootstrap 中使用输入插件（输入之前/之后的标签），输入应该添加到 .input-group 中。它在使用大多数输入类型时都能正常工作，但在 Firefox 中的 数字输入 情况下就不行了。当父项太窄时，输入组会溢出其父项的宽度。这个问题似乎只出现在 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>

【问题讨论】：

标签： html css twitter-bootstrap firefox

【解决方案1】：

我发现这个问题只存在于 Firefox 开发者版中，所以可能会在以后的版本中修复。

【讨论】：