Bootstrap 3 aggiunta di controlli a un'intestazione del pannello

Question

Risultato desiderato: Avere un pannello della cinghia di avvio che contiene un titolo a sinistra dell'intestazione e un campo di testo di ricerca con un pulsante di aggiunta per una ricerca. L'icona finale sarebbe un'opzione/pulsante chiave inglese per l'impostazione di alcune opzioni del corpo del pannello.

Codice attuale:

<div class="container"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading clearfix"> 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
       <div class="input-group pull-right"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <div class="input-group-btn"> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
        </div> 
       </div> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 
</div> 

Risultato corrente: io desidero il pannello-header di essere su una sola riga. Farò alcune modifiche man mano che andremo a dimensioni più piccole. Tuttavia, il codice corrente sta causando il completamento dei componenti su più righe.

Answer 1

Basta sbarazzarsi della classe .pull-right nel gruppo di input.

<div class="container"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading clearfix"> 
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <div class="input-group-btn"> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
         <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button> 
        </div> 
       </div> 
     </div> 
     <div class="panel-body"> 
      Panel content 
     </div> 
    </div> 
</div> 

Working Example

Aggiornamento

Se si desidera che l'ingresso (ho dato l'ID #Special) più piccolo e allineato a destra, si può fare qualcosa di simile tramite CSS:

#Special { 
    width: 200px; 
    float: right; 
} 

html:

<input id="Special" type="text" class="form-control" placeholder="Search"> 

Updated Example