上一篇: 是否有垂直栏(|)有效的CSS或Fire... 下一篇:css – sass是否损害性能？

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

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – Twitter Bootstrap – 将输入与控制组内的标签垂直对齐，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<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实践中.

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

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

解决方法

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