Question

<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/

我正在尝试将输入与已经推过多行的标签中心对齐，但是在最好的bootstrap实践中。

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

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

Answer 1

如何覆盖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;
}

<强> Example fiddle

Answer 2

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

    <div class="input-append spacedTop">

然后添加CSS

    .spacedTop { margin-top:10px; }

如果您不进行额外课程，则会保留您在整个网站中使用的任何其他输入附加内容。

Twitter Bootstrap - 将输入与控制组内的标签垂直对齐

2 个答案: