ड्रॉपडाउन मेनू गलत नेविबार आइटम

Question

के नीचे प्रस्तुत करता है मैं बूटस्ट्रैप 2 के साथ एक साइट बना रहा हूं, और मैं नेविबार में एक आइटम में एक ड्रॉपडाउन मेनू जोड़ना चाहता हूं।

काफी सरल। हालांकि, जब लटकती विस्तार किया जाता है, यह नेवबार में गलत आइटम के नीचे दिखाई देता:

ऊपर दिए गए स्क्रीनशॉट कि लटकती नीचे "व्यवस्थापक" (वाम-पंथी नेवबार तत्व) के बदले "लोकेटर रेंडर होता

सूचना "(वह तत्व जो ड्रॉपडाउन को सक्रिय करता है)।

मैं इसे कैसे ठीक करूं ताकि सही नवाबार तत्व के नीचे ड्रॉपडाउन दिखाई दे?

यहाँ नेवबार के लिए HTML है:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="...">Dashboard</a> 

     <div class="nav-collapse collapse pull-right"> 
     <ul class="nav"> 
      <li><a href="...">Admin</a></li> 
      <li><a href="...">Find Trips</a></li> 

      <!-- Locator Dropdown --> 
      <li> 
      <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." 
        data-toggle="dropdown" data-target="#"> 
       Locator 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> 
       <li><a href="...">My Trips</a></li> 
       <li><a href="...">Create Trip</a></li> 
      </ul> 
      </li> 

      <li><a href="...">My Profile</a></li> 
      <li><a href="...">Log Out</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

आपका लटकती क्योंकि आप वर्ग है कि आपके लटकती के लिए रिश्तेदार की स्थिति को परिभाषित करता है भूल रहे हैं गलत मौके पर ही दिखाई दे रहा है। इसे ठीक करने के लिए, बस .dropdown वर्ग अपने मेनू आइटम के लिए एक सबमेनू के साथ इसलिए की तरह जोड़ें:

<li class="dropdown"> ... </li>

यहाँ अपने निश्चित मार्कअप है:

एचटीएमएल

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="...">Dashboard</a> 

     <div class="nav-collapse collapse pull-right"> 
     <ul class="nav"> 
      <li><a href="...">Admin</a></li> 
      <li><a href="...">Find Trips</a></li> 

      <!-- Locator Dropdown --> 
      <li class="dropdown"> 
      <a id="nav-locator-dropdown" class="dropdown-toggle" href="..." 
        data-toggle="dropdown" data-target="#"> 
       Locator 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown"> 
       <li><a href="...">My Trips</a></li> 
       <li><a href="...">Create Trip</a></li> 
      </ul> 
      </li> 

      <li><a href="...">My Profile</a></li> 
      <li><a href="...">Log Out</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>