उत्तरदायी पतन के बिना बूटस्ट्रैप 3 नवबार का उपयोग करने का सबसे अच्छा तरीका

Question

मैं बूटस्ट्रैप 3 में एक साधारण Navbar बनाने की कोशिश कर रहा हूं जो संकुचित नहीं होता है - उत्तरदायी यहां आवश्यक नहीं है क्योंकि हमारे पास बाएं + बटन पर एक साधारण शीर्षक है सही।

मेरा लक्ष्य शीर्षक + बटन हमेशा सभी संकल्पों के लिए समान दिखाना है। कुछ इस तरह:

<div class="navbar navbar-fixed-top"> 

    <form class="navbar-form navbar-right"> 
     <button class="btn btn-default">Button 1</button> 
     <button class="btn btn-default">Button 2</button> 
    </form> 

    <a class="navbar-brand" href="#">Title Here</a> 

</div> 

मैं documentation से कई संयोजनों की कोशिश की है। और this post outlines how to use the new .nav-header classes। मैंने .nav-header के अंदर तत्वों को डुप्लिकेट करने का प्रयास किया है - और बीएस 3 मीडिया क्वेरी शैलियों को ओवरराइड करने का भी प्रयास किया है।

क्या बिना गिरने के नवरबार का उपयोग करने का कोई आसान तरीका है?

Answer 1

सबसे अच्छा तरीका है मैं मिल सकता है 2 navbar-header कंटेनर का उपयोग करें, और तब pull-left और pull-right का उपयोग के बाद से वे किसी भी उत्तरदायी मीडिया क्वेरी से जुड़ा नहीं है करने के लिए है .. Bootply पर

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-header pull-left"> 
     <a class="navbar-brand" href="#">Title Here</a> 
    </div> 
    <div class="navbar-header pull-right"> 
     <button type="button" class="btn btn-default navbar-btn">Button 1</button> 
     <button type="button" class="btn btn-default navbar-btn">Button 2</button> 
    </div> 
</div> 

डेमो: http://bootply.com/74912

Answer 2

मेरे मामले में, मैंने केवल navbar-header का उपयोग किया और कुछ भी नहीं।

असल में, नेबर-हेडर मुझे आसानी से सभी शीर्षलेख सीएसएस प्राप्त करने में मदद करेगा। इसके अंदर, मैंने एक कंटेनर जोड़ा और आपके विकल्पों के साथ अपने जैसा ही मामला खेला।

<nav class="navbar navbar-default navbar-fixed-top" id="transient-header"> 
     <div class="container clearfix"> 
      <div class="transient-header-block clearfix"> 
       <h1 class="hide" href="/" style="color: #fff;">Primary</h1> 
       <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a> 
       <div class="pull-right price"> 
        <a href="#" class="btn btn-white-border contact-modal" href="#contactModal"> 
         {{> svgs/_white_rupee_icon}} 
         {{product.price}} 
        </a> 
       </div> 
      </div> 
     </div> 
    </nav>