Twitter Bootstrap - 将输入与控件组中的标签垂直对齐 [英] Twitter Bootstrap - Vertically align input with label inside control-group

问题描述

 < div class =control-group> 
< label class =control-label>在您的收据上详细说明的购买日期< / label> 
< div class =controls> 
< div class =input-append> 
< select name =invoice_datevalue =2013-06-28required =required> 
< option value =>请选择< / option> 
< / select> 
< button type =buttonclass =btn info btn-primarydata-help =invoice_date> i< / button> 
< / div> 
< / div> 
< / div> 
 

我尝试了几种解决方案和一种使用位置绝对工作，但这影响了其他领域的引导特别是当它得到回应。

http：// jsfiddle。 net / tGZLd /

我想让输入与标签的中心排成一行

或者，我应该放弃并强制显示带有下方输入的全宽标签吗？

$ b $

解决方案

如何覆盖Bootstrap的样式并使用 display：inline-block; 而不是定位的浮动，则可以使用 vertical-align 将标签置中：

  .form-horizo​​ntal .control-label {
 display：inline-block; 
 vertical-align：middle; 
 float：none; 
} 
 .form-horizo​​ntal .controls {
 display：inline-block; 
 margin-left：20px; 
} 
  

示例fiddle

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

I tried a few solutions and one kind of worked using position absolute, but this affected other areas of bootstrap in particular when it gets responsive.

http://jsfiddle.net/tGZLd/

I am trying to get the input to line up with the center of the label that has been pushed over multiple lines but in the best practice of bootstrap.

Or should I simply give up and force it to display a full width label with the input underneath?

Any insight would be great, thanks!

解决方案

How about overriding Bootstrap's styles and using display:inline-block; instead of floats for the positioning, then you can use vertical-align to center the label:

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

Example fiddle

这篇关于Twitter Bootstrap - 将输入与控件组中的标签垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！