什么CSS控制Twitter Bootstrap中这些表单元素之间的左右边距？

Question

我无法弄清楚是什么控制了这些内联表单元素之间的边距。例如，两个文本输入字段之间的边距。

编辑： 我知道如何控制以改变这些边距，但为什么它们之间存在差距。我现在在bootstrap中找不到任何负责这些3或4px边距的CSS。

Answer 1

Bootstrap文档中输入之间的空格是由于HTML中的空格。请记住，.form-group设置为内联块，该块对空白区域敏感。

有关演示，请参阅http://jsfiddle.net/kvcrawford/Rs54Q/1/

您可以使用以下某些CSS修复它：

.form-inline-space-fix .form-group {
    margin-right: 4px;
}
.form-inline-space-fix .form-group:last-child {
    margin-right: 0;
}

Answer 2

以下是您需要的CSS选择器..

保证输入/字段：

.form-inline .form-group {
    margin: 0px 10px; /* Add something like this */
}

复选框/单选按钮的保证金：

.form-inline .radio, .form-inline .checkbox {
    margin: 0px 10px; /* Add something like this */
}

提交按钮的保证金：

.bs-example > .btn, .bs-example > .btn-group {
    margin: 0px 10px; /* Add something like this */
}

整个内联表格的保证金

.bs-example {
    margin: 0px 30px; /* Add something like this */
}

要回答你的问题，目前元素之间存在边距，因为这是默认值。如果你想删除它们，我建议你手动添加负边距到我上面指定的CSS控件。例如，如果要删除输入之间的边距，请执行以下操作：

.form-inline .form-group {
    margin: 0px -3px; /* Add a negative margin to remove it*/
}

Answer 3

观看表单所需的 HTML 代码

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2"
        placeholder="Enter email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2"
        placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

例如在输入字段后加上更多的边距，你可以：

form.form-inline div.form-group {
 margin-right: 10px;
}

同样，您可以对其他元素执行相同的操作（例如，对于复选框form.form-inline div.checkbox，对于提交按钮form.form-inline button）

Answer 4

我明白你的困惑。您想知道为什么两个输入字段之间存在差距。

为此，答案实际上取决于父表单类bs-example form-inline。如果您使用firebug或chromes的chromebug进行检查，那么您将看到如下样式：.bs-example {margin: 0 -15px 15px;}。现在，这是控制两个单独输入字段之间空间的部分。如果你使用火虫或铬虫来阻止它，那么你会看到这些字段实际上位于另一个之下，而这个边距和vertical-align定位使两者都保持不变。