Question

这适用于Bootstrap 3.3.7

我有以下标记 - 适用于全宽（.container-fluid）灰色背景，带有居中（.container）形式：

边框的内联样式用于调试目的，但如果删除它们的结果是相同的。

<div class="homepage-signup-insights container-fluid" style="border:1px solid red;">

<div class="container" style="border:1px solid orange;">
    <div class="row">
        <div class="col-md-12 text-center">

            <form class="form-inline">
                <div class="form-group">
                    <h3><b>Sign up for Newsletter</b></h3>
                </div>

                <div class="form-group">
                    <input type="text" class="form-control input-lg" placeholder="Name" required>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-lg" placeholder="Company" required>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control input-lg" placeholder="Email" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg">Send</button>
            </form>

        </div>
    </div>
</div>

在Chrome 60.0.3112.113上，它看起来像这样 - 这就是我想要的：

在Firefox 55.0.3中，它看起来像这样。正如您所看到的，文本左侧有更多空间＆＃34;注册时事通讯＆＃34;。但我不明白为什么，因为标记是相同的，并且没有CSS或浏览器特定的黑客攻击：

有没有人知道为什么会这样？

应用于.homepage-signup-insights的Sass如下。删除它仍然会产生相同的错误（除了它当然没有样式）：

.homepage-signup-insights {
    background-color: #DEDEDE;
    padding: 20px 0 20px 0;

    .form-group {
        margin-right: 20px;
    }
    input[type="text"], input[type="email"] {
        border:0;
        border-radius: 0;
        background-color: #fff;
    }
}

Answer 1

＆＃34;解决方案＆＃34;我想到的是将max-width: 220px应用于CSS输入：

input[type="text"], input[type="email"] {
    max-width: 220px;
    // ...
}

这是因为我注意到使用Developer工具栏，Chrome为输入（.input-lg）提供了220px的宽度，而Firefox为它们提供了308px的宽度。 Firefox中的额外宽度会使事情继续分为2行。

我不知道是否有人有更好的解决方案？即使您为输入提供size=属性，Firefox也会比Chrome更宽。非常奇怪，而不是我在Bootstrap中期望它试图提供跨浏览器一致性的东西。

Firefox渲染Bootstrap 3` .form-inline`和文本输入比Chrome

1 个答案: