需要跨浏览器的一致 Bootstrap 表单输入

Question

我的表单上有一个输入字段网格。 Bootstrap 自然是在 Firefox, which is how I want the form to look, but the fields are getting jammed together in Chrome 中的字段之间添加了一点水平 space。在上面的 Firefox 图像中，我在 Firebug 中突出显示了 col-md-2 div，它包装了输入字段。 input 字段在 Chrome 中突出显示。

这似乎是不同之处 - Firefox 似乎将输入字段限制在网格元素内，但在 Chrome 中并非如此。在 Firefox 中，网格中的输入字段为 144 像素宽，但在 Chrome 中为 170 像素宽。

这是一行字段的标记：

<div class="row signup">
    <div class="col-md-1">
        <span class="plus-icon">
            <img width="18" height="18" src="/assets/plus.jpg" alt="Plus">
        </span>

        <span class="minus-icon">
            <img width="18" height="18" src="/assets/minus.jpg" alt="Minus">
        </span>

    </div>
    <div class="col-md-2">
        <input id="sheet_slots_attributes_0_label" type="text" name="sheet[slots_attributes][0][label]" value="Food">
    </div>
    <div class="col-md-2">
        <input id="sheet_slots_attributes_0_name" type="text" name="sheet[slots_attributes][0][name]" value="Foo">
    </div>
    <div class="col-md-2">
        <input id="sheet_slots_attributes_0_email" type="text" name="sheet[slots_attributes][0][email]" value="foo@foo.com">
    </div>
    <div class="col-md-2">
        <input id="sheet_slots_attributes_0_phone" type="text" name="sheet[slots_attributes][0][phone]" value="">
    </div>
    <div class="col-md-2">
        <input id="sheet_slots_attributes_0_comments" type="text" name="sheet[slots_attributes][0][comments]" value="">
    </div>
</div>

我试图构建一个 fiddle 来演示这一点，但我无法让它工作。很抱歉没有 fiddle，但我认为以前可能有人看过这个。

仅供参考，row signup 标记只是将底部边距添加到 space 行之外。另外，我尝试添加一个额外的 col-md-1 以在每行的开头和结尾都达到偶数 12，但这没有帮助。我没有任何额外的标记 - 只是使用 Bootstrap.

最好能理解为什么输入框在 Chrome 上看起来也相对丑陋（方形和普通） - 也许这是相关的。

Answer 1

您需要将输入的宽度设置为 100%。这使它们占据了容器的宽度。否则，您会让浏览器确定输入的默认宽度。您可以手动执行此操作，或将 bootstrap class form-control 添加到每个输入。

See it in action in this demo bootply

需要跨浏览器的一致 Bootstrap 表单输入

Need consistent Bootstrap form inputs across browsers

css

cross-browser

twitter-bootstrap-3