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

标签 css twitter-bootstrap

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

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

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

示例:在上面的链接中,在“验证状态”中,如何减小“带警告的输入”行和“带错误的输入”行之间的差距,以及如何减小文本输入的高度?

最佳答案

如果您想将标签移近您需要更改宽度的输入。

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

关于css - 降低 Bootstrap 表单组件之间的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12942310/

相关文章:

html - 如何更改 Bootstrap 中网格的宽度?

html - 居中的 div 在顶部被切断?

html - 为什么文本悬停在我的 asp.net 元素上不起​​作用?

Jquery Carousel 不会重置为开头和布局问题

javascript - 每次用户刷新页面时不同的JS动画

html - 根据多个嵌套 flexboxes 中另一个容器的动态高度在一个容器中创建滚动

html - Bootstrap 导航栏右侧不工作

html - 内容不在 div 内

css - 适用于手机/小屏幕的响应式 CSS

html - 扩展 Bootstrap 以包含超小的内联表单