4

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

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

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

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

4

2 回答 2

4

如果要将标签移动到更靠近输入的位置，则需要更改宽度。

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

于 2012-10-17T20:13:00.180 回答
3

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

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

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

于 2012-10-17T20:14:23.860 回答