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

【问题标题】：Twitter Bootstrap - Vertically align input with label inside control-groupTwitter Bootstrap - 将输入与控制组内的标签垂直对齐
【发布时间】：2013-07-24 15:05:14
【问题描述】：

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

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

或者我应该简单地放弃并强制它在下面显示一个全宽标签吗？

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

【问题讨论】：

我在div.input-append 中添加了margin-top: 10px，这似乎使它看起来不错，但不确定这是否是您想要的。玩弄边距和填充而不是定位，以便您添加的其他输入也会受到这些更改的影响。让我知道这是怎么回事
我刚刚将select 和button 标签的css 添加到style="vertical-align:text-top"。那是你要找的吗？工作小提琴：jsfiddle.net/EwD6Z
@aug 这是一个权宜之计的解决方案，如果我设置多种样式可以工作，但我正在寻找更具活力的东西。
@jlars62 这是一个很好的整理东西的解决方案，可能是一个可能的解决方案，但是我希望垂直对齐它，所以假设你有一个带有 3 行的标签，输入将保持垂直以标签为中心。

标签： css forms twitter-bootstrap

【解决方案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

【讨论】：

我刚刚对此进行了测试，虽然我只进行了轻度测试，但它是响应式的，它实际上解决了我在使用 Bootstrap 的表单的响应方面遇到的另一个问题。这太简单了，简直不敢相信我错过了，谢谢。

【解决方案2】：

向输入附加添加一个类，然后对其应用边距。

    <div class="input-append spacedTop">

然后添加 CSS

    .spacedTop { margin-top:10px; }

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

【讨论】：

如上所述，这将是一个解决方案，但是当标签开始跨越更多行时，它就不是一个足够动态的解决方案，不过感谢您的想法。