匹配字段集引导程序中的顶部和底部填充答案

【问题标题】：Match the top and bottom padding in fieldset bootstrap匹配字段集引导程序中的顶部和底部填充
【发布时间】：2015-02-07 16:49:40
【问题描述】：

我正在按照下面的帖子在引导程序中向字段集和图例添加一些 css。

Use Fieldset Legend with bootstrap

HTML

<fieldset class=" scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label col-xs-6 input-label" for="startTime">Start :</label>
        <div class="controls col-xs-6  bootstrap-timepicker">
            <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS

fieldset.scheduler-border {
    border: 1px groove  !important;
    padding: 0 1em 1em !important;
    margin: 0 0 0 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
    legend.scheduler-border {
        font-size: 1.1em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 5px;
        border-top:none;
        border-bottom:none;
    }

小提琴： http://jsfiddle.net/zpp1u1q5/

这是现在的样子

如何更改 CSS 以减少 reduce H1 并使其等于 H2 ？

【问题讨论】：

尝试使用margin: 0 auto;

标签： html css twitter-bootstrap

【解决方案1】：

您的第一个差距是由于legend 的margin-bottom：

而第二个差距是由于fieldset 的padding-bottom：

调整其中一个以获得所需的布局（legend 上的 4px margin-bottom 似乎很合适）

【讨论】：

【解决方案2】：

也许您需要更改 padding-left，这里是解决方案： http://jsfiddle.net/td9o6ecg/

<fieldset class=" scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
    <label class="control-label col-xs-6 input-label" style="padding-left: 5px;" for="startTime">Start :</label>
    <div class="controls col-xs-6  bootstrap-timepicker">
        <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
        <i class="icon-time"></i>
    </div>
</div>
</fieldset>

【讨论】：