1

我有以下单行，其中包含一个搜索输入栏和 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>
4

1 回答 1

0

为左对齐和内联块控件添加.form-inline到您的表单（不必是 a ）。

于 2015-06-28T19:02:21.023 回答