css - ブートストラップを使用して単一行に複数の入力フィールドとボタン

Question

検索入力バーと 2 つのボタンを含む次の 1 行があります。隣のボタンに応じて検索入力ボックスを小さくするために、これをスタイルするにはどうすればよいですか? 検索ボックスの右側と、画像に表示されているボタンの左側に、さらに 2 つの入力フィールドを追加したいと思います。「col-md-x」を使わずにこれを行う方法はありますか?

http://i.imgur.com/r4kqYm0.png

これは私がこれまでに持っているものですが、非常にハックしているように感じます。

<div class="col-md-10 search-left">
    <form>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-btn" dropdown>
                    <button type="button" class="btn btn-default dropdown-toggle first-dropdown" dropdown-toggle>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li></li>
                    </ul>
                </div>
                <div class="input-group-btn" dropdown>
                    <button type="button" class="btn btn-default dropdown-toggle second-dropdown"
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li></li>
                    </ul>
                </div>
                <input type="text" class="form-control" placeholder="Search term" ng-model="search.value">
            </div>
        </div>
    </form>
</div>
<div class="col-md-2 search-right">
    <div class="pull-right" popover="Please select rows to export" popover-trigger="mouseenter">
        <button class='btn btn-default'><span class="glyphicon glyphicon-download-alt"></span></button>
    </div>
    <div class="pull-right">
        <button class='btn btn-default add-item' ng-click="addItem()">Add Staff</button>
    </div>
</div>