减少 Bootstrap 表单组件之间的高度答案

【问题标题】：Reduce height between Bootstrap form components减少 Bootstrap 表单组件之间的高度
【发布时间】：2012-10-17 19:55:44
【问题描述】：

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

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

如何减少两个组件之间的垂直距离并使其更小？

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

如果要将标签移近输入，则需要更改宽度。

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

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

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 文件...

【讨论】：

感谢您的回复。该代码有助于缩小组件和标签，但它将组件和标签向右移动。示例 - 第 3 行第 3 列的组件，浮动到第 3 行第 4 列。

【解决方案2】：

对于表单验证，请在 CSS 中更改此规则

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

要找到这些，请在 Chrome（或带有 Firebug 的 Firefox）中右键单击上面该链接中的元素。从列表中选择检查元素。然后在打开的属性检查器中（在元素选项卡中将鼠标悬停在项目上，直到找到显示要更改的属性的项目。在这种情况下，它是具有“控制组警告”类的潜水单击该元素并在检查器的右侧，它将向您显示相关的 CSS 规则。然后您可以搜索您的 CSS 并修复规则。您也可以在检查器中实际更改它并在您正在检查的页面上实时查看结果。

【讨论】：