减少Bootstrap表单组件之间的高度 [英] Reduce height between Bootstrap form components

问题描述

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

I am using Twitter Bootstrap and its form components:

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

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

How do I reduce the vertical distance between two components and also make them smaller?

示例：在上面的链接中，在验证状态

Example: In the link above, in the 'Validation states', how do I reduce the gap between 'input with warning' row and 'input with error' row, and how do I reduce the height of the text input?

推荐答案

输入错误的行，如果您想将标签移动到输入处，则需要更改宽度。

If you want to move the label closer to the input you need to change the width.

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

要更改输入的高度，您需要更改height属性

To change the height of the inputs you need to change the "height" property for this selector.

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;
}

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

To reduce the height between rows you need to change the margin of the row.

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

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

These are default styles which are used in bootstrap.css. If you want to override these I would suggest setting a top level class on your page. This way you can override the defaults without rewriting the bootstrap.css file...

这篇关于减少Bootstrap表单组件之间的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！