ट्विटर बूटस्ट्रैप 3 - Navbar क्षैतिज

Question

मैं बूटस्ट्रैप के साथ 'fiddlin' हूँ। मैं एक क्षैतिज navbar बनाने की कोशिश कर रहा है सिवाय इसके कि यह क्षैतिज बाहर नहीं निकलता है। मैंने सोचा कि नेविबार बॉक्स से क्षैतिज होना चाहिए, क्या मुझे शायद कुछ अतिरिक्त सीएसएस चाहिए? चेक करें,

<div class="row"> 
    <div class="col-12">    
     <div class="navbar"> 
      <div class="navbar-inner"> 
      <a class="brand" href="#">Title</a> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/FxkZT/

Answer 1

DEMO

आपका कोड बूटस्ट्रैप 2 के लिए है और बदला जाना चाहिए। बूटस्ट्रैप 3 में:

1. <a class="brand" href="#">Title</a><a class="navbar-brand" href="#">Title</a>
2. <ul class="nav"> डॉक here में <div class="navbar-inner">

अधिक जानकारी के लिए हो जाता है <ul class="nav navbar-nav">

कोई और अधिक की जरूरत बन जाता है।

Answer 2

http://jsfiddle.net/FxkZT/5/

मैं सिर्फ सीएसएस का यह छोटा सा जोड़ा गया है और करते हैं:

मैं इस तरह बूटस्ट्रैप प्रलेखन से एक नेविगेशन बार नकल कोड करने की कोशिश की मुझे पता है कि यह आपके लिए काम करता है:

सीएसएस:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* Internet Explorer 7 compatibility */ 
    *zoom:1; 
    vertical-align: top; 
} 

HTML:

<div class="row"> 
    <div class="col-12"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
      <a class="brand" href="#">Title</a> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
      </ul> 
      </div> 
     </div> 


    </div> 
</div>