Question

如果我在输入旁边有一个带有标签的表单，用纯HTML表示，并且两者都是内联（或内联块），那么它们就会根据它们的基线对齐。但是当使用bootstrap并将输入放在输入组中时，它们似乎会被底部对齐。

我试图在没有引导程序的情况下复制它，但我不能，它只是起作用。我创建了小提琴以显示问题：

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

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

1 个答案:

http://jsfiddle.net/N62he/