使列拉伸填充Bootstrap中的任何空间

Question

我有这个问题：

html如下：

<div class="row">
    <div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
        <form class="form">
            <input type="text" class="form-control" />
        </form>
    </div>
    <div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
        <span class="push-buttons-away-from-search-bar btn-group" role="group">
            <a class="btn btn-lg" href="">A link</a>
            <a class="btn btn-lg" href="">Another link</a>
        </span>
    </div>
</div>

你能想到一种响应式（引导）方式，使搜索能够在所有空间中占据一席之地，并为侧面的2个按钮留出空间。

注意两个按钮之间的间距，按钮分组样式正在妨碍...也许你建议使用按钮组？

Answer 1

假设您正在使用Bootstrap 3，那么您可能正在寻找的是Justified Buttons。红色：http://getbootstrap.com/components/#btn-groups-justified

示例：

<div class="row">
    <div class="col-sm-8">
        <input type="text" class="form-control" />
    </div>
    <div class="col-sm-4">
        <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
          <a href="#" class="btn btn-default" role="button">Left</a>
          <a href="#" class="btn btn-default" role="button">Right</a>
        </div>
    </div>
</div>

JSFiddle：请注意，这可以扩展到多个按钮。

<强>更新

由于您需要在不缩放按钮的情况下缩放输入，您是否尝试过输入组上的分段按钮？参考：http://getbootstrap.com/components/#input-groups-buttons-segmented

<div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Button One</button>
        <button type="button" class="btn btn-default">Button Two</button>
        <button type="button" class="btn btn-default">Button Three</button>
    </div>
</div>

JSFiddle：请注意，这不会在按钮之间留出空格。