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

Question

我的表单上有一个输入字段网格。 Bootstrap 自然会在 Firefox 中的字段之间添加一点水平空间。 ，这是我希望表单的外观，但字段在 Chrome 中被挤在一起了.在上面的 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 标记只是添加底部边距以稍微隔开行。此外，我尝试添加一个额外的 col-md-1 以在每行的开头和结尾都达到偶数 12，但这没有帮助。对于这些，我没有任何额外的标记 - 只是使用 Bootstrap。

如果还了解为什么输入框在 Chrome 上看起来也相对丑陋(方形和普通)，那就太好了 - 也许这是相关的。

Answer 1

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

See it in action in this demo bootply