Hộp văn bản nội tuyến Bootstrap và nút tìm kiếm

Question

Tôi có hộp nhập tìm kiếm, mà tôi muốn tạo kiểu với bootstrap với giao diện điều khiển biểu mẫu khởi động. Vấn đề là, tôi cũng muốn nút tìm kiếm trên cùng một dòng với hộp tìm kiếm. Tôi nghĩ điều này có thể được thực hiện với hình thức-inline, nhưng khi tôi thêm lớp mẫu kiểm soát vào hộp tìm kiếm, nút tìm kiếm được đẩy vào dòng tiếp theo:

<div class="input-group" > 
    <div class="form-inline"> 
     <input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" > 
     <input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch"> 
    </div> 
</div> 

http://jsfiddle.net/TLEbG/

Nếu tôi loại bỏ lớp inline = "hình thức kiểm soát" từ hộp đầu vào, các nút được hiển thị:

http://jsfiddle.net/ETs9M/

Làm thế nào tôi có thể giữ phong cách hộp form-contol, trong khi vẫn giữ nút inline?

Answer 1

Hãy thử sử dụng các nhóm đầu vào: http://getbootstrap.com/components/#input-groups này đặt vào nút bên cạnh textfield và làm cho nó trở thành một thành phần

Answer 2

Câu trả lời này xuất phát từ original poster's comment:

<div class="input-group"> 
    <input id="address" type="text" placeholder="City or Zipcode" class="form-control"> 
    <span class="input-group-btn"> 
    <button class="btn btn-default" type="button" id="addressSearch">Search</button> 
    </span> 
</div> 

Bootply: http://www.bootply.com/gVSi912QEI#