为什么使用输入组会破坏引导程序中的基线对齐？

如果我有一个表单，输入旁边有一个标签，采用纯 HTML，并且两者都是内联（或内联块），那么它们将按基线对齐。但是，当使用引导程序并将输入放入输入组时，它们似乎按底部对齐。

我尝试在没有引导程序的情况下复制它，但我做不到，它只是有效。我创建了小提琴来显示问题：

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;
}

因为输入组是display: inline-table;并且标签位于输入组之外。 如果您检查 input-group-addon 元素，您会发现它被设置为display: table-cell; and 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/