Несколько кнопок в группе ввода

Question

Я пытаюсь реализовать входную группу, которая имеет несколько кнопок на левой и на данный момент только одну кнопку справа, как показано на этом изображении:

Проблема это, как только я более чем одну кнопки на каждую сторону, поле ввода изменяется до максимальной ширины и ноги одну кнопки на небольших экранах:

с только кнопками на левом и кнопках на право, он работает на 100% на всех размеров экрана:

Le Код:

<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

Любая идея о том, как сделать первую работу изображения для всех размеры экрана?

Answer 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

Answer 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

Answer 3

использование БТН-вторичный класс

<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>