Sử dụng nhóm đầu vào bên trong biểu mẫu nội tuyến

Question

Khi thêm input-group vào form-inline, input-group xuất hiện bên dưới biểu mẫu trên "dòng mới" thay vì nội tuyến bằng các điều khiển khác.

Dường như điều này là do lớp input-group wrapper có display thiết lập để table trong khi các đầu vào khác, mà làm việc tốt, có display bộ của họ để inline-block. Tất nhiên, không thể cung cấp cho màn hình input-groupinline-block vì con của nó add-on, có display: table-cell, cần thuộc tính của cha mẹ để căn chỉnh chính xác.

Vì vậy, câu hỏi của tôi là: là nó có thể sử dụng input-group bên trong một hình thức inline sử dụng các lớp Bootstrap độc quyền? Nếu không, những gì sẽ là công việc tốt nhất xung quanh cho phép sử dụng các lớp tùy chỉnh.

Dưới đây là một demo minh họa quan điểm của tôi. Mã này là như sau:

<form action="" class="form-inline"> 
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> 

    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> and Checkboxes 
     </label> 
    </div> 
    <select class="form-control" style="width: 150px;"> 
     <option>and Selects</option> 
    </select> 

    <button type="submit" class="btn btn-default">and Buttons</button> 
    <div class="input-group" style="width: 220px;"> 
     <span class="input-group-addon">BUT</span> 
     <input type="text" class="form-control" placeholder="not with input-groups" /> 
    </div> 
</form> 

Answer 1

Đây thực sự là lỗi và đã được giải quyết (kiểm tra issue on github để biết thêm thông tin).

Từ bây giờ, các biểu mẫu nội tuyến trong BootStrap yêu cầu phải quấn các điều khiển biểu mẫu con bằng .form-group.

Vì vậy, mã của tôi sẽ trở thành:

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    </div> 

    ... 
    <div class="form-group"> 
     <div class="input-group" style="width: 220px;"> 
      <span class="input-group-addon">BUT</span> 
      <input type="text" class="form-control" placeholder="not with input-groups" /> 
     </div> 
    </div> 
</form> 

Answer 2

Tôi nghĩ bạn có thể cần phải tách biểu mẫu của bạn thành các cột để có bố cục nội tuyến bạn muốn. Một ví dụ (tôi nghĩ về những gì bạn đang sau) là trên trang web Bootstrap here.

thử đặt

<div class="col-lg-1"></div> 

xung quanh điều khiển của bạn để xem những gì tôi có ý nghĩa. Bạn tất nhiên cần phải làm việc trong các cột 12 vì vậy điều này sẽ cần phải được điều chỉnh cho phù hợp.