css - 降低 Bootstrap 表单组件之间的高度

Question

我正在使用 Twitter Bootstrap 及其表单组件:

http://twitter.github.com/bootstrap/base-css.html#forms

如何减小两个组件之间的垂直距离并使它们变小？

示例:在上面的链接中，在“验证状态”中，如何减小“带警告的输入”行和“带错误的输入”行之间的差距，以及如何减小文本输入的高度？

Answer 1

如果您想将标签移近您需要更改宽度的输入。

.form-horizontal .control-label {
    width:160px;
}

要更改输入的高度，您需要更改此选择器的“高度”属性。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
   height:20px;
}

要减小行之间的高度，您需要更改行的边距。

.form-horizontal .control-group {
    margin-bottom:20px;
}

这些是在 bootstrap.css 中使用的默认样式。如果你想覆盖这些我建议在你的页面上设置一个顶级类。这样您就可以覆盖默认值而无需重写 bootstrap.css 文件...