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

Question

如果我有一个在输入旁边带有标签的表单，采用纯 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;
}

Answer 1

因为输入组是display: inline-table;，并且标签在输入组之外。 如果您检查 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/