Multiple buttons in input group

Question

I'm trying to implement an input group that has multiple buttons on the left and for now only one button on the right as shown in this image:

The problem is, as soon as I have more than one button per side, the input field resizes to max width and kicks the one button out on smaller displays:

With only a button on the left and a button on the right, it works 100% on all screen sizes:

Le Code:

    <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

Any idea on how to make the first image work for all screen sizes?

Answer 1

You don't need the btn-group element...

    <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

Answer 2

Don't use two button group wrapper elements.

<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