Question

我的表单上有一个输入字段网格。 Bootstrap自然在Firefox中的字段之间添加了一些水平空间，这就是我希望表单看起来的样子，但字段在Chrome中被卡在一起。在上面的Firefox图片中，我突出显示了包含输入字段的Firebug中的col-md-2 div。 Chrome中突出显示input字段。

这似乎有所不同 - 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>

我试图建立一个小提琴来证明这一点，但我无法让它发挥作用。很抱歉没有小提琴，但我以为有人可能已经看过这个。

仅供参考row signup标记只是添加底部边距以略微划分行。另外，我尝试在每行的开头和结尾添加一个额外的col-md-1以获得均匀的12，但它没有帮助。我没有任何额外的标记 - 仅使用Bootstrap。

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

Answer 1

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

See it in action in this demo bootply

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

1 个答案: