Nhóm đầu vào lớn hơn đầu vào trong Bootstrap 3 bằng cách sử dụng vùng chứa Jumbotron

Question

Tôi đang thử nghiệm một hành vi lạ với các nhóm đầu vào Bootstrap 3. Khi tôi thêm một đầu vào-nhóm-addon (văn bản hoặc biểu tượng) vào một biểu mẫu bên trong một jumbotron, chiều cao nhóm đầu vào lớn hơn chiều cao đầu vào của nó.

Ở đây bạn có thể tìm thấy một JsFiddle và một ảnh chụp màn hình với các vấn đề:

<div class="jumbotron"> 
    <h1>Jumbotron with form</h1> 
     <form> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Username"> 
        <span class="input-group-addon">@</span> 
      </div> 
     </form> 
    </div> 

Sống dụ tại http://jsfiddle.net/DTcHh/

Ảnh chụp màn hình:

Làm thế nào tôi có thể khắc phục vấn đề này? Tôi đang tìm một giải pháp Bootstrap nhưng nếu đó là không thể sẽ được tốt đẹp nếu bạn có thể giúp tôi sửa chữa nó với các quy tắc CSS.

Answer 1

Giải pháp bootstrap là thêm lớp input-group-lg trên chứa <div> - như shown in the documentation, nhưng bạn sẽ nhận thấy các addon vẫn còn hơi lớn hơn so với đầu vào vì vậy bạn chỉ có thể điều chỉnh chiều cao của <input> để phù hợp; Tôi thêm 5 px:

http://jsfiddle.net/DTcHh/21/

Answer 2

Nhìn doc Bootstrap như Chơi vơi gợi ý, mã ban đầu của bạn trông hoàn toàn hợp lệ. Việc thêm lớp đầu vào-nhóm-lg là rất tốt nếu bạn muốn LARGE nhưng nếu bạn không làm như vậy thì sẽ sai. Sử dụng IE9 và chạy mã của bạn trong cả môi trường dev của riêng tôi và jsfiddle của Adrift, nó hoạt động chính xác (đối với tôi) có và không có lớp đầu vào-nhóm-lg, ngoại trừ tất nhiên với nó nó được hiển thị lớn. Có lẽ một vấn đề cụ thể của trình duyệt ??

Điều đó nói rằng, tôi đang gặp phải sự cố tương tự khi cố gắng thêm nút radio ở phía trước máy chọn lọc. Oh well ...

Answer 3

Vấn đề chính của kích thước .input-group-addon trong .jumbotron là nó được thừa hưởng font-size của .jumbotron.

Thông thường, mọi người đang cố gắng để thay đổi chiều cao, min-height hoặc đệm, vv

Tuy nhiên nguyên nhân gây ra kích thước khác nhau là .input-group trong .jumbotron thừa hưởng "font-size: 21px;"

Bạn nên thay đổi các font-size của .input-groupKHÔNG.input-group-addon như bên dưới.

.input-group { font-size: 14px !important; } 

Answer 4

Đêm qua, tôi đã gặp vấn đề tương tự. Không có bản sửa lỗi nào được đề cập ở trên hoạt động trong ngữ cảnh của tôi. Điều cuối cùng đã làm công việc là đặt lề thành 0:

.input-group .form-control { 
    margin: 0px !important; 
} 

Có lẽ điều này giúp ai đó có vấn đề tương tự!

Answer 5

tôi cố định nó được thêm id="search_button" nút của tôi:

<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"/> 
    <span class="input-group-btn"> 
     <button id="search_button" class="btn btn-primary" type="button">GO</button> 
    </span> 
</div> 

sau đó tôi áp dụng các phong cách sau vào nút của tôi:

#search_button { 
    width: 90px; 
    margin: 0 auto; 
    text-align: justify; 
} 

Đó là tất cả.

Answer 6

Thay vì làm cho đầu vào lớn hơn, hãy làm cho khoảng (đầu vào nhóm-addon) nhỏ hơn. Để làm điều đó, làm cho đệm của nó thấp hơn. Vì vậy:

.input-group-addon { 
    padding: 0px 6px; 
}