Css 需要跨浏览器的一致引导表单输入

我的表单上有一个输入字段网格。Bootstrap自然会在中的字段之间添加一点水平空间，这就是我希望表单的外观，但是字段会被挤在一起。在上面的Firefox图像中，我突出显示了Firebug中的

col-md-2

div

，它包装了输入字段。

输入

字段在Chrome中突出显示

这似乎是不同之处——Firefox似乎在限制输入字段以适应网格元素，但Chrome并非如此。在Firefox中，网格中的输入字段宽度为144 px，而在Chrome中则为170 px

以下是一行字段的标记：

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

我试图制作一把小提琴来演示这一点，但我无法让它工作。很抱歉没有小提琴，但我想可能有人以前见过

仅供参考，

行注册

标记只是添加了底部边距，以便将行隔开一点。此外，我还尝试添加一个额外的

col-md-1

，以便在每行的开头和结尾都达到偶数12，但这没有帮助。我没有任何额外的标记，只是使用引导

---

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

您需要将输入框的宽度设置为100%。这使得它们占据了容器的宽度。否则，您将让浏览器确定输入的默认宽度。您可以手动执行此操作，或者将引导类

表单控件

添加到每个输入

---

好吧，这至少值得投票——谢谢特德。对我来说，

表单控件

使输入非常窄，有点太高。100%宽度工作，但输入仍然有点窄。我似乎能够通过调整宽度来解决这个问题（对于所有浏览器来说，115%的宽度看起来都很不错）。这种方法有什么危险吗？还有，你知道为什么我的输入框在FF中看起来如此漂亮，而在Chrome（和IE）中却如此呆板吗？我是否缺少或覆盖了其他一些样式？那个么我认为你们的问题是引导中水槽的宽度。您可以在他们的站点上自定义引导，使其具有更窄的排水沟。将它们设置为115%的风险在于，当它们缩小到手机尺寸时，可能会奇怪地溢出。至于样式，如果你不应用任何样式，你就让浏览器决定它们应该是什么样子。@steveklein在这里，我要展示的是在CSS中添加自定义网格覆盖（使水槽更窄）。115%上的要点很好，我将其设置回100%。当你说去他们的网站，你的意思是我需要配置一个新的

bootstrap

发行版，它有更窄的排水沟吗？我使用的是Rails，所以这并没有包含gems和manifest指令那么好。好的，我知道你在那里做了什么。从这里开始我应该很好-再次感谢你的帮助。另外，关于使用www.placehold.it定制大小的图形占位符的引导中有一个很好的隐含提示！