ट्विटर बूटस्ट्रैप - नेविबार के अंदर ड्रॉपडाउन लेकिन एनवी-पतन के बाहर

Question

मैं नेविबार में एक ड्रॉपडाउन जोड़ना चाहता हूं, लेकिन यह सुनिश्चित करें कि जब ब्राउज़र को संकुचित चौड़ाई में बदल दिया जाता है, तो ड्रॉपडाउन नेविबार में दिखाई देता है और इसमें शामिल नहीं है नव-पतन।

नीचे दिए गए एचटीएमएल काम करता है। हालांकि, जब पृष्ठ का आकार बदलता है, तो ड्रॉपडाउन अगली पंक्ति पर गिर जाता है, और नेविबार में विस्तारित डिस्प्ले, मुझे बहुत गहरी नौसेना के साथ छोड़कर।

मैं बूटस्ट्रैप-collapse.js और बूटस्ट्रैप-ड्रॉपडाउन.जेएस को कॉल कर रहा हूं।

किसी को भी कोई विचार है?

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Project</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
     <div class="container"> 
     <ul class="nav pull-right"> 
      <li class="divider-vertical"></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sharing<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Google+</a></li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

ऐसा इसलिए है क्योंकि कंटेनर दाईं ओर या उस तरह कुछ गद्देदार है। मार्जिन-दाएं क्रमशः मार्जिन-बाएं का उपयोग करें: -30 पीएक्स; दाएं, क्रमशः बाईं ओर अनियंत्रित सूची में।

नहीं वास्तव में सुंदर है, लेकिन वे इसे ठीक कर जब तक ...

Answer 2

According to Mark Otto, बूटस्ट्रैप के डेवलपर्स में से एक:

नेवबार में .nav भीतर सभी ड्रॉपडाउन प्रभावित हो जाएगा। वर्तमान में हम इस व्यवहार को रोकने के लिए एक रास्ता नहीं देते हैं।

हालांकि, एक संक्षिप्त नौसेना में एक अनिश्चित ड्रॉपडाउन होना संभव है। आप तीन में से एक तरह से यह पूरा कर सकते हैं:

1. लटकती (data-no-collapse="true") के एक डेटा विशेषता जोड़ें उत्तरदायी चयनकर्ताओं ठीक करने के लिए।
2. ग्राउंड अप से अपनी शैलियों का पुनर्निर्माण करने के लिए ड्रॉपडाउन की कक्षा (class="dropdown-menu-no-collapse") को बदलें।
3. उत्तरदायी शैलियों को ओवरराइड करने के लिए ड्रॉपडाउन (class="dropdown-menu no-collapse) में एक और कक्षा जोड़ें।

I wrote a blog post जो बताता है कि क्या करना है। पहली विधि को bootstrap-responsive.css संपादित करने की आवश्यकता है, और दूसरे को bootstrap.css बदलने की आवश्यकता है। आपको किसी भी बूटस्ट्रैप के सीएसएस को तीसरे विधि के लिए बदलने की ज़रूरत नहीं है, लेकिन इसे बनाए रखना बहुत मुश्किल है।