Çoklu düğmeleri

Question

ben solda ve bu resimde görüldüğü gibi sağ tarafta artık tek bir düğme için birden düğmeler vardır bir giriş grubunu uygulamak çalışıyorum olduğu en kısa sürede yan başına birden fazla düğmesine sahip olarak, giriş alanı maksimum genişliği boyutlandırır ve daha küçük ekranlarda bir düğme tekmeler: sol ve bir düğmeye tek bir düğme ile

üzerinde

Le Kodu:

<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

herkes için ilk görüntü çalışması konusunda herhangi bir fikir hakkı, tüm ekran boyutlarında% 100 çalışır ekran boyutları?

Answer 1

...

<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

İki düğmeli grup sarıcı öğeleri kullanmayın. Sen btn-group elemanı gerekmez

<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

kullanım btn-ikincil sınıf

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