css - Bootstrap 3 垂直对齐问题与包含输入元素的网格部分

Question

我有一行被分成不同的列和子列。在正确的示例中，还有几个输入，但为了清楚起见，我将它们删除了，因为本示例不需要它们。

        <form id="inputForm" class="form-inline" role="form">
            <div class="row">
                <div class="col-xs-4">
                    <label class="control-label">Primary Packaging:</label>
                </div>
                <div class="col-xs-6">
                    <label for="pack1Height" class="control-label">Height:</label>
                    <div class="input-group">
                        <input type="text" id="pack1Height" class="form-control small text-right" />
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="col-xs-2">
                    <label class="control-label">Vol:</label>
                    <label class="control-label">999</label>
                    <label class="control-label">cm<sup>3</sup></label>
                </div>
            </div>
        </form>

如果你看http://jsfiddle.net/53vu25ad/您可以看到问题是“Primary Packaging”和“Vol: 999 cm3”在行内没有垂直对齐——它们是顶部对齐的。我在这里遗漏了什么吗？

(ps:在我的表单上，“高度”标签和输入元素在同一行，我不知道为什么它们不在这个 jsfiddle 中，但这与问题无关 - 我仍然期望以查看两侧垂直对齐的两个标签)。

Answer 1

使用前沿的尚未发布的 Bootstrap v3.2.1:JS Fiddle

诀窍是使用虚拟.form-control-static:

<div class="col-xs-4">
    <div class="form-group">
        <label class="control-label">Primary Packaging:</label>
        <p class="form-control-static">&nbsp;</p>
    </div>
</div>