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（对于左对齐和内联块控件，它不一定是a）。

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

1 个答案: