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/，您可以看到问题为“主要包装”和“Vol：999 cm3”未在行内垂直对齐 - 它们是顶部对齐的。这里有什么我想念的吗？

（ps：在我的表单上，“height”标签和输入元素在同一行，我不知道为什么他们不在这个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>

Answer 2

没有使用实验引导程序，我解决这个问题的方法是添加一个与34px的表单控件元素高度相匹配的简单自定义类。

通过将行line-height设置为相同，它会自动对内容进行操作。

.fixedRow {
    line-height: 34px;
}

<div class="row fixedRow">
    <div class="col-xs-4">
         <label class="control-label">Primary Packaging:</label>
     </div>
...

更新了jsfiddle：http://jsfiddle.net/53vu25ad/2/

Answer 3

请找到更新的jsfiddle

您可能需要使用.form-group

的.form-inline课程

<form id="inputForm" class="form-inline" role="form">
      <div class="form-group">
            <label class="control-label">Primary Packaging:</label>
         </div>   
      <div class="form-group">
         <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 fw1">mm</span>
         </div>
      </div>
      <div class="form-group">
         <label class="control-label">Vol:</label>
         <label class="control-label">999</label>
         <label class="control-label">cm<sup>3</sup></label>
      </div>
   </div>
   </div>
</form>

Bootstrap 3 Vertical与包含输入元素的网格部分对齐问题

3 个答案: