css - 使用 Bootstrap 在单行上的多个输入字段和按钮

Question

我有以下单行，其中包含一个搜索输入栏和 2 个按钮。我如何设计它以使搜索输入框根据旁边的按钮变小？我想在搜索框的右侧和图像中显示的按钮的左侧再添加 2 个输入字段。有没有办法不使用“col-md-x”来做到这一点？

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

这是我目前所拥有的，但我觉得它非常 hacky。

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

Answer 1

将 .form-inline 添加到您的表单(不必是 )以实现左对齐和内联 block 控件。