Bootstrap: select в input-group, как вставить?

Question

[Alexander_Berlin]

Имеем:

<div class="input-group">
      <select class="form-control">
            <option value="0">Type 1</option>
            <option value="1">Type 2</option>
      </select>
      <input type="text" class="form-control" name="search[input]" placeholder="Search...">
      <div class="input-group-btn">
            <button type="button" class="btn btn-default">Search</button>
      </div>
</div>

Так вот select нормально не становиться, тоесть он должен быть сгруппирован, так же как input и button... никак не получается :(

Answer 1

[Дмитрий Иванов]

Вот как-то так :

<div class="panel-heading clearfix">
      <form class="input-group col-md-4">
        <div class="input-group-btn">
          <select class="btn btn-default dropdown-toggle">
            <option value="1">Type 1</option>
            <option value="2">Type 2   </option>
          </select>
        </div>
        <input type="text" name="search[input]" placeholder="Search..." class="form-control"/>
        <div class="input-group-btn">
          <button type="submit" class="btn">Search <i class="glyphicon glyphicon-search"></i></button>
        </div>
      </form>
    </div>

Только селект получается немного меньше по высоте, поэтому делаем ему вручную высоту в 34 пикселя..

Пример на Codepen