Bootstrap 3 panel-başlığı

Question

İstenilen Sonucuna denetimler ekleyerek: aramayla eklenti düğmesi ile başlığı solunda ve bir arama metin alanına bir başlık içeren bir önyükleme kayış paneli var. Son simge, bazı panel gövde seçeneklerini ayarlamak için bir seçenek/anahtar düğmesi olacaktır.

Güncel Kodu:

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

Güncel Sonuç: Ben panel başlığı tek bir satırda olmak arzusu. Daha küçük form boyutuna giderken bazı ayarlamalar yapacağım. Ancak mevcut kod, bileşenlerin birden çok satıra sarılmasına neden oluyor.

Answer 1

Giriş grubunuzdaki .pull-right sınıfından kurtulun.

: Eğer giriş istiyorsanız

<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

Güncelleme

daha küçük ve sağa hizalanmış, CSS yoluyla böyle bir şey yapabilir (ben o kimliği #Special verdi)

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

html:

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

Updated Example