Bootstrap встроенное текстовое поле и кнопка поиска

У меня есть поле ввода поиска, которое я хочу стилизовать с помощью bootstrap с помощью формы управления загрузкой. Проблема в том, что мне также нужна кнопка поиска в той же строке, что и поле поиска. Я думал, что это можно сделать с помощью form-inline, но когда я добавляю класс form-control в поле поиска, кнопка поиска нажимается на следующую строку:

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

Если я удаляю class= "form-control" из текстового поля ввода, кнопка отображается в строке:

http://jsfiddle.net/ETs9M/

Как я могу сохранить стиль коробки form-contol, сохраняя при этом кнопку inline?

8
ruby-on-rails-4 twitter-bootstrap

2 ответов

попробуйте использовать входные группы:http://getbootstrap.com/components/#input-groups это помещает кнопку рядом с текстовым полем и делает его одним компонентом

13

этот ответ исходит из комментарий оригинального плаката: 

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

10