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

Question

我不知道是什么控制了这些内联表单元素之间的边距。例如两个文本输入字段之间的边距。

编辑：我知道如何控制改变这些边距，但为什么它们之间现在有边距。目前我在引导程序中找不到任何负责它们之间 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;}。现在这是控制两个单独输入字段之间空间的部分。如果您使用 fire bug 或 chrome bug 阻止它，那么您将看到这些字段实际上位于另一个下方，并且正是这个边距以及vertical-align将它们保持在适当位置的定位。