问题描述
我使用Twitter Bootstrap及其表单组件：
I am using Twitter Bootstrap and its form components:
我如何减少两个组件之间的垂直距离，并减小它们之间的距离？
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表单组件之间的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！