如何使用 twitter bootstrap 减少输入之间的空间？答案

【问题标题】：How can I decrease the space between inputs with twitter bootstrap?如何使用 twitter bootstrap 减少输入之间的空间？
【发布时间】：2012-09-19 20:42:08
【问题描述】：

我正在使用css form styles from Twitter Bootstrap，但我想减小表单输入字段之间的默认间距。不确定我需要覆盖哪个 css 元素。

有什么想法吗？

【问题讨论】：

使用 Firebug 或 Webkit 的检查器。此外，在即将推出的 bootstrap 2.0 中，CSS 和结构发生了显着变化。
尽量减少form .clearfix的margin-bottom
Simone Vittori：谢谢，就是这样。clearfix { margin-bottom: 5px;缩放：1； }
@ceejayoz 知道 2.0 何时发布？
没有消息，但应该很快。

标签： html css twitter-bootstrap

【解决方案1】：

在使用 Bootstrap v2.1 时，我使用它们的水平表单来降低表单的高度，然后我发现更改 .control-group 底部边距可以达到预期的效果。

我相信默认是 20px，我用的是 8px

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

【讨论】：

【解决方案2】：

如果您使用默认设置，您可以减少.line 边距以实现您的目标。试试这个：

form .line {
    margin-bottom: 5px; //adjust to your liking
}

当然，如果您正在使用由引导程序使用的行 div 分隔的输入字段，例如：

<div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" name="input" size="30">
        </div>
</div>
<div class="line">
        <label for="input">Last Name</label>
        <div class="input">
            <input type="text" name="input" size="30">
        </div>
</div>
...

演示http://jsfiddle.net/andresilich/qxMVd/1/

【讨论】：