Bootstrap Label Hộp kiểm Xung quanh và Nhập

Question

Tôi đang tạo biểu mẫu có hộp kiểm phù hợp với đầu vào văn bản. Đây là những gì tôi đã làm để làm cho nó trông đẹp với bootstrap:

<label class="checkbox"> 
    <input type="checkbox" name="keywords" value="__option__"> 
    <input type="text" name="keywords_other_option" value="" placeholder="Other"> 
</label> 

Có vẻ tốt, nhưng nó không hoạt động tốt. Trong firefox, người dùng không thể nhập vào hộp văn bản. Có cách khởi động tốt để đặt hộp kiểm và nhập văn bản nội tuyến với nhau không?

Answer 1

Không đặt hai yếu tố input vào bên trong một yếu tố label.

Và đây là Twitter Bootstrap cách để giải quyết việc này:

<form class="form-inline"> 
    <label class="checkbox"> 
    <input type="checkbox" name="keywords" value="__option__"> 
    </label> 
    <input type="text" name="keywords_other_option" value="" placeholder="Other"> 
</form> 

Đây là DEMO.

Xem thêm ví dụ từ official documentation.