html - 为什么使用输入组会破坏 Bootstrap 中的基线对齐？

Question

如果我有一个表单，在输入旁边有一个标签，在纯 HTML 中，并且都是内联的(或内联 block )，那么它们按基线对齐。但是当使用 bootstrap 并将输入放入输入组时，它们似乎在底部对齐。

我试图在没有 Bootstrap 的情况下复制它，但我做不到，它只是有效。我创建了 fiddle 来显示问题:

http://jsfiddle.net/pupeno/9aJCF/3/

HTML 是:

<p>A case working, with just an input:</p>
<div class="form-group without-input-group">
    <label>label</label>
    <input type="text" class="form-control" value="value" />
</div>
<hr/>
<p>A case broken with the same HTML structure, but not using bootstrap:</p>
<div class="without-bootstrap">
    <label>label</label>
    <div class="group">
        <input type="text" class="form-control" value="value" />
        <span>addon</span>
    </div>
</div>
<hr/>
<p>The broken situation, with the input group:</p>
<div class="form-group with-input-group">
    <label>label</label>
    <div class="input-group">
        <input type="text" class="form-control" value="value" />
        <span class="input-group-addon">addon</span>
    </div>
</div>

和CSS:

.without-input-group input {
    max-width: 250px;
    display: inline-block;
}

.without-bootstrap .group {
    max-width: 250px;
    display: inline-table;
}
.without-bootstrap .group input {
    display: table-cell;
}
.without-bootstrap .group span {
    display: table-cell;
}


.with-input-group .input-group {
    max-width: 250px;
    display: inline-table;
}

Answer 1

因为输入组是display: inline-table; 而标签在input-group之外。如果您检查 input-group-addon 元素，您会看到它被设置为 display: table-cell; 和 vertical-align: middle;。如果您将标签移动到输入组内并将其设置为与输入组插件相同的样式，则它会正确排列。

<div class="form-group with-input-group">    
    <div class="input-group">
        <label>label</label>
        <input type="text" class="form-control" value="value" />
        <span class="input-group-addon">addon</span>
    </div>
</div>

.

.input-group label {
    padding: 4px;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/N62he/