Bootstrap 3 - добавляет обновление

Я обновляюсь до Bootstrap 3, но я просто не могу понять, как обновить мои старые приложения-добавления.

У меня было что-то вроде этого:

<div class="input-append">
  <select>
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="btn" value="valami">
</div>

Предварительный просмотр: http://bootply.com/75910

В Bootstrap 3 это самое близкое, что я мог получить

<div class="input-group">
  <select class="form-control">
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="form-control btn btn-default" value="valami">
</div>

Предварительный просмотр: http://bootply.com/75912

Если я удалю этот диапазон, он станет идеальным, но они будут в разных строках.

Любая идея, как это сделать правильно?

Ответы

Ответ 1

Это документировано здесь и здесь:

Удалите ввод-добавление и ввод-добавление для единственного .input-group. Классы изменились для элементов внутри и требуют немного большей разметки для использования кнопок:

  • Используйте .input-group как родительский класс вокруг ввода и аддона.
  • Для текстовых добавок/добавок используйте .input-group-addon вместо .addon.
  • Для добавления/добавления кнопок,    используйте .input-group-btn и поместите свой .btn в этот элемент.

Пример: 

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-12 col-lg-3">
      <form class="form-search">
          <div class="input-group">
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-search">Search</button>
              </span>
          </div>
      </form>
    </div>
  </div>
</div>

EDIT: рабочие примеры из @kviktor и @max4ever:

http://bootply.com/75917

http://bootply.com/78014