<div class="control-group"> <label class="control-label ">Date of purchase as detailed on your receipt</label> <div class="controls"> <div class="input-append"> <select name="invoice_date" value="2013-06-28" required="required"> <option value="">Please Select</option> </select> <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button> </div> </div> </div>@H_502_4@我尝试了一些解决方案和一种使用绝对位置的方法,但这会影响其他引导区域,特别是当它响应时. @H_502_4@http://jsfiddle.net/tGZLd/ @H_502_4@我正在尝试将输入与标签的中心对齐,该标签已经被推到多行但是在最好的bootstrap实践中. @H_502_4@或者我应该放弃并强制它显示带有下方输入的全宽标签? @H_502_4@任何见解都会很棒,谢谢!
解决方法
如何覆盖Bootstrap的样式并使用display:inline-block;而不是用于定位的浮动,然后您可以使用vertical-align来使标签居中:
.form-horizontal .control-label { display: inline-block; vertical-align: middle; float: none; } .form-horizontal .controls { display: inline-block; margin-left: 20px; }@H_502_4@Example fiddle