Question

我有一个表单，它有一个图例和一组字段。我正在使用Bootstrap 2.x来设计它。出于某种原因，空格出现在表单上方，但仅限Chrome（在IE10和Firefox中渲染效果很好）。我已经把它简化为基础，以证明我遇到的问题：

<form>
    <fieldset>
        <legend>Legend</legend>

        <div class="control-group">
            <!-- This div results in the space appearing above the form -->
            <label class="control-label">First Name</label>
            <div class="controls">
                <input type="text" />
            </div>
        </div>
    </fieldset>
</form>

如果我从包裹输入字段的div中删除class =“control-group”，那么该空间会神奇地消失，尽管看似与此问题无关。我已经检查了Chrome中的所有边距和填充，并且没有任何内容，所以我不知道这个间距来自哪里。我需要在这些字段div上使用这个类，因为我正在实现一个水平形式。我正在试着弄清楚如何解决这个问题 - 任何想法？这里有一个jsfiddle演示：http://jsfiddle.net/christhecoder/kDrVH/3/

非常感谢任何帮助！

Answer 1

http://jsfiddle.net/kDrVH/10/

@import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");

legend+.control-group{
    margin-top:0px;
}

你得到20个边距：legend+.control-group

Answer 2

这是因为<legend>的bootstrap CSS规则有margin-bottom:20px

只需添加CSS规则：

legend {

margin-bottom: 0px;

}

此外，您只能将其添加到图例标签：

<legend style="margin-bottom: 0px;">

// Whatever you want

</legend>

JSFIDDLE DEMO

Answer 3

而不是

legend+.control-group {
    margin-top: 20px;
}

使用它。它将保留您当前的布局并删除表单上方的空间。

legend+.control-group {
    padding-top: 20px;
}

空格显示在表单上方（仅限Chrome）

3 个答案: