0

我有一个表格，里面有一个图例和一组字段。我正在使用 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/

任何帮助将非常感激！

4

3 回答 3

2

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

于 2013-09-09T14:49:44.623 回答
1

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

只需添加一个 CSS 规则：

legend {

margin-bottom: 0px;

}

您也可以仅将其添加到您的图例标签中：

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

// Whatever you want

</legend>

JSFIDDLE 演示

于 2013-09-09T14:55:51.590 回答
0

代替

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

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

legend+.control-group {
    padding-top: 20px;
}
于 2013-09-09T15:01:20.060 回答