Twitter Bootstrap - Sắp thẳng hàng căn chỉnh đầu vào với nhãn bên trong nhóm điều khiển

Question

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

Tôi đã thử một vài giải pháp và một loại làm việc sử dụng vị trí tuyệt đối, nhưng điều này ảnh hưởng đến các khu vực khác của bootstrap đặc biệt khi nó được đáp ứng.

http://jsfiddle.net/tGZLd/

tôi đang cố gắng để có được đầu vào cho thẳng hàng với các trung tâm nhãn mà đã được đẩy trên nhiều dòng nhưng trong thực hành tốt nhất của bootstrap.

Hoặc tôi chỉ cần từ bỏ và buộc nó hiển thị nhãn chiều rộng đầy đủ với đầu vào bên dưới?

Mọi thông tin chi tiết sẽ tuyệt vời, cảm ơn!

Answer 1

Làm thế nào về trọng phong cách Bootstrap và sử dụng display:inline-block; thay vì nổi cho các vị trí, sau đó bạn có thể sử dụng vertical-align để tập trung nhãn:

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

Example fiddle

Answer 2

Thêm lớp vào phụ lục nhập, sau đó áp dụng lề cho điều đó.

<div class="input-append spacedTop"> 

Sau đó, thêm CSS

.spacedTop { margin-top:10px; } 

Nếu bạn không làm một lớp học thêm nó sẽ lề bất kỳ đầu vào gắn thêm khác mà bạn sử dụng trong trang web của bạn.