Question

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

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

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

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

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

Answer 2

对于表单验证，在CSS

中更改此规则

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

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

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

2 个答案: