为什么在引导中使用输入组中断基准线对齐？ [英] Why does using an input group break the baseline alignment in bootstrap?

问题描述

如果我有一个在输入旁边有标签的表单，以纯HTML格式，并且都是内联（或内联块），则它们按照其基线对齐。但是当使用引导并将输入放在输入组中时，它们似乎在底部对齐。

If I have a form with a label next to an input, in plain HTML, and both are inline (or inline block), then they are aligned by their baseline. But when using bootstrap and putting the input in an input group, it seems they get aligned by their bottom.

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

I tried to replicate this without bootstrap, but I couldn't, it just works. I created fiddle to show the problem:

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

推荐答案

code> display：inline-table; ，并且标签在输入组之外。
如果检查input-group-addon元素，您会看到它设置为 display：table-cell; 和 align：middle; 。
如果您将输入组中的标签移动，并将它的样式设置为与input-group-addon相同，则它正确排列。

Because the input group is display: inline-table; and the label is outside the input-group. If you inspect the input-group-addon element, you see that it is set to display: table-cell; and vertical-align: middle;. If you move the label inside the input-group and style it same as the input-group-addon it lines up correctly.

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

这篇关于为什么在引导中使用输入组中断基准线对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！