选择控件不在输入组内加入/匹配2个其他控件（文本输入和输入组-btn）

Question

我正在尝试创建一个包含3个控件的输入组。以下内容：

                      1. Filter dropdown of sort (Currently using <select>
                      2. The input text box
                      3. The Search button

我设法让后者2按预期工作，它们都加入并按预期显示但是当我尝试添加一个选择控件时虽然在线它似乎没有与另一个相同的高度2个控件。我已经尝试了各种各样的组合，并且已经没有想法尝试了。

在bootstrap文档中，他们没有使用下拉控件显示如何执行此操作但是当我尝试执行此操作时，我无法像控件那样使其工作。

有人可以建议我如何添加过滤器控件吗？以下是我的角度控制器$ scope.filterOptions = [“test”，“test2”，“test3”]中的数据示例。

我基本上要实现的是类似于bootstrap文档示例的内容：

这是我目前的非工作HTML。

<div class="panel-heading clearfix">
        <form class="input-group col-md-4">
            <div class="input-group-btn">
                <select class="btn btn-default" ng-model="filterOption">
                    <span class="caret"></span>
                    <option ng-repeat="option in filterOptions" value="{{option}}">{{option}}</option>
                </select>
            </div>
            <input type="text" ng-model="query" class="form-control" placeholder="Enter ID / Name">
            <div class="input-group-btn">
                <button ng-click="search()" type="submit" class="btn"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </form>
    </div>

这是我制作的一个傻瓜，它显示了同样的问题：http://plnkr.co/edit/uDFmFZSbIMBP4DqalhQC?p=preview

Answer 1

select与引导程序example中的button相比较的高度较小，因此选择高度会使其与其他控件相同。

默认

CSS

select {height: 34px;}

Demo here