Firefox输入开箱即用

Question

问题可能与bootstrap本身有关。当输入被包装到col-*类并且是.form-inline组的一部分时，它开箱即用。

这是一个快速测试案例：

<div class="form-inline row">
  <div class="col-sm-8">

  </div>
  <div class="col-sm-2 text-center">
    <input class="form-control" id="qty-0" max="100" maxlength="3" min="1" value="1" type="number">
  </div>
  <div class="col-sm-2">
    <span>Some text</span>
  </div>
</div>

我还创建了fiddle。

请注意：我不是在寻找修复方法，因为可以通过添加width: 100%来修复this example。

这是Firefox中的错误还是预期的行为？

编辑：以下是输入的显示方式

编辑2 ：避免混淆错误使用的引导类here is another example

编辑3 ：none bootstrap example replicating the problem

Answer 1

试试这个

<div class="row">
  <div class="col-sm-2"><input class="form-control" id="qty-0" max="100" maxlength="3" min="1" value="1" type="number"></div>
  <div class="col-sm-2"><span>Some text</span></div>
</div>

编辑：

查看你的代码，你正在使用form-inline，你可以删除那部分没有用于引导程序的行，因为它在使用firefox或IE时不兼容

Answer 2

将此添加到您的CSS：

input,
select {
  max-width: 100%;
}

希望它会有所帮助！