输入组中的多个按钮答案

【问题标题】：Multiple buttons in input group输入组中的多个按钮
【发布时间】：2016-12-07 05:50:43
【问题描述】：

我正在尝试实现一个输入组，该输入组在左侧有多个按钮，现在右侧只有一个按钮，如下图所示：

问题是，只要我每边有多个按钮，输入字段的大小就会调整为最大宽度并在较小的显示器上踢出一个按钮：

只有一个按钮在左边和一个按钮在右边，它在所有屏幕尺寸上都能 100% 工作：

乐码：

    <div class="input-group br">
        <span class="input-group-btn">
            <div class="btn-group">
                <a href="#" class="btn btn-primary clear-search">
                    <span class="glyphicon glyphicon-refresh"></span>
                </a>
                <a href="#" class="btn btn-primary qr-code">
                    <span class="glyphicon glyphicon-qrcode"></span>
                </a>
            </div>
        </span>
        <input class="form-control search" type="search" name="search" placeholder="Search">
        <span class="input-group-btn">
            <div class="btn-group dropup">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-search"></span>
                    Search
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a class="buyer-identifier" href="#">Buyer Number</a></li>
                    ...
                    <li class="divider"></li>
                    <li><a class="clear-search" href="#">Clear Search</a></li>
                </ul>
            </div>
        </span>
    </div>

Fiddle demo

知道如何使第一张图片适用于所有屏幕尺寸吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您不需要btn-group 元素...

    <div class="input-group br">
        <span class="input-group-btn">
            <a href="#" class="btn btn-primary clear-search">
              <span class="glyphicon glyphicon-refresh"></span>
          </a>
          <a href="#" class="btn btn-primary qr-code">
            <span class="glyphicon glyphicon-qrcode"></span>
          </a>
        </span>
        <input class="form-control search" type="search" name="search" placeholder="Search">
        <span class="input-group-btn">
            <div class="btn-group dropup">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-search"></span>
                    Search
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a class="buyer-identifier" href="#">Buyer Number</a></li>
                    ...
                    <li class="divider"></li>
                    <li><a class="clear-search" href="#">Clear Search</a></li>
                </ul>
            </div>
        </span>
    </div>

Bootply example

【讨论】：

【解决方案2】：

不要使用两个按钮组包装元素。

<div class="input-group br"> <span class="input-group-btn">
    <a href="#" class="btn btn-primary clear-search">
        <span class="glyphicon glyphicon-refresh"></span>
    </a> 
    <a href="#" class="btn btn-primary qr-code">
        <span class="glyphicon glyphicon-qrcode"></span>
    </a>

Demo

【讨论】：

【解决方案3】：

使用 btn-secondary 类

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
  <div class="input-group-btn">
    <button type="button" class="btn btn-secondary">☺</button>
    <button type="button" class="btn btn-secondary">SEND</button>
  </div>
</div>

【讨论】：

这是 Bootstrap 4 的东西吗？我不确定它与这个特定问题是否相关。