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

Question

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

编辑:我知道如何控制以改变这些边距,但为什么它们之间存在差距.我在引导程序中找不到任何CSS,它们负责它们之间的这些3或4px边距.

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*/
}