6 
<div class="control-group">
    <label class="control-label ">Date of purchase as detailed on your receipt</label>
    <div class="controls">
        <div class="input-append">
            <select name="invoice_date" value="2013-06-28" required="required">
                <option value="">Please Select</option>
            </select>
            <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button>
        </div>
    </div>
</div>

我尝试了一些解决方案，其中一种使用绝对位置来工作，但这会影响引导程序的其他领域，特别是当它响应时。

http://jsfiddle.net/tGZLd/

我试图让输入与已被推过多行但在引导程序的最佳实践中的标签中心对齐。

或者我应该简单地放弃并强制它显示一个带有输入下方的全宽标签？

任何见解都会很棒，谢谢！

4

2 回答 2

13

如何覆盖 Bootstrap 的样式并使用display:inline-block;而不是浮动进行定位，然后您可以使用vertical-align将标签居中：

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

示例小提琴

于 2013-07-24T22:42:52.640 回答
-1

向 input-append 添加一个类，然后对其应用边距。

    <div class="input-append spacedTop">

然后添加CSS

    .spacedTop { margin-top:10px; }

如果您不做额外的课程，它将保留您在整个站点中使用的任何其他输入附加。

于 2013-07-24T22:42:09.520 回答