bootstrap label input 对齐

第一行代码未加input,垂直不能对齐。第二行代码中加入input控件，对齐的就很好，如何在不加input的情况下垂直对齐？ 

<form name="form1" class="form-horizontal "  >

                          <div class="control-group">
                            <span class="control-label">名称</span>
                            <div class="controls form-inline">
                                <label class="inline" for="inputKey">测试数据</label>
                            </div>
                          </div>


                          <div class="control-group">
                            <span class="control-label">联系人</span>
                            <div class="controls form-inline">
                                <label for="inputKey">测试联系人</label>
                                <input class="input-xlarge focused" name="Phone" type="text" >
                            </div>
                          </div>

因为加了input整个div的高度变了，随便用chrome或者ff的工具看一下就明白了。。 

解决办法么要么自己改css，要么在第一个label后面加一个这个 

<div style="height:30px;display: inline-block;margin-bottom: 0;vertical-align: middle;"></div>

作用就是和下面的input意义一样，只不过是个空的div而已

 

转载于:https://my.oschina.net/OriginLeon/blog/619223