Firefox 输入开箱即用答案

【问题标题】：Firefox input goes out of the boxFirefox 输入开箱即用
【发布时间】：2017-12-15 05:47:32
【问题描述】：

问题可能与引导程序本身有关。当输入被包装到 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 中的错误还是预期行为？

EDIT：这是输入的显示方式

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

编辑 3：none bootstrap example replicating the problem

【问题讨论】：

在我的 Firefox 中运行良好
请分享您的 Firefox 版本
在 Firefox 中运行良好
火狐版本 54.0
您将form-inline 与row 混合使用。 form-inline 必须放在表单`标签上，并且包含 form-groups 而不是 rows

标签： html css twitter-bootstrap firefox

【解决方案1】：

将此添加到您的 CSS：

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

希望对您有所帮助！

【讨论】：

我知道它会有所帮助。你能解释一下为什么会这样吗？
因为在选择中有默认的填充和宽度：100% 宽度和高度属性（以及最小/最大属性）包括内容，填充意味着：100% + 填充所以选择消失。在这种情况下，您也可以设置 box-sizing:border-box 。 paulirish.com/2012/box-sizing-border-box-ftw
我已经告诉过你，我知道设置宽度可以解决问题。当输入宽度为自动时，请比较我在 Chrome 和 Firefox 中的示例。 Chrome 将输入扩展到父元素的宽度，但 Firefox 没有。为什么？

【解决方案2】：

试试这个

<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>

已编辑：

查看您的代码，您使用的是内联表单，您可以删除与引导行不匹配的部分，因为它在使用 firefox 或 IE 时不兼容

【讨论】：

我将忽略您的回答，因为我不需要解决方案，请再次阅读问题。
看看更新问题中的第三个例子。