बूटस्ट्रैप 3 एक पैनल-शीर्षक

Question

वांछित परिणाम के लिए नियंत्रण जोड़ने: एक बूट पट्टा पैनल कि शीर्षक के बाईं और एक खोज के लिए एक ऐड-ऑन बटन के साथ एक खोज पाठ फ़ील्ड पर एक शीर्षक होता है। कुछ पैनल बॉडी विकल्प सेट करने के लिए अंतिम आइकन एक विकल्प/रिंच बटन होगा।

वर्तमान कोड:

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

वर्तमान परिणाम: मैं पैनल हेडर एक पंक्ति पर होना करने की इच्छा। मैं कुछ समायोजन करूँगा क्योंकि हम छोटे आकार के आकार में जाते हैं। हालांकि वर्तमान कोड घटकों को कई पंक्तियों पर लपेटने का कारण बन रहा है।

Answer 1

बस अपने इनपुट-समूह में .pull-right कक्षा से छुटकारा पाएं।

:

<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

अद्यतन

आप इनपुट चाहते हैं छोटे और दाएँ संरेखित, आप सीएसएस के माध्यम से कुछ इस तरह कर सकते हैं (मैं इसे आईडी #Special दिया)

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

एचटीएमएल:

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

Updated Example