"अधिक" विकल्प के साथ बूटस्ट्रैप मेनू उत्तरदायी समस्या

Question

मैंने अपने काम के लिए बूटस्ट्रैप का उपयोग किया। मेरे पास पृष्ठ के शीर्ष पर लगभग 15 आइटम मेनू-आइटम का एक गुच्छा है। इसलिए, मेरा शीर्ष मेनू स्क्रीन चौड़ाई को अपनाने वाला नहीं है। यह बहती हुई मेनू द्वारा पेश की गई अगली पंक्ति में टूट जाती है। मैं "अधिक" मेनू के साथ मेनू को ओवरफ्लो को अगली पंक्ति में रोकना चाहता हूं।

आइडिया यह है कि अतिप्रवाह मेनू-आइटम "अधिक" मेनू ड्रॉपडाउन पर जाते हैं। लेकिन मुझे नहीं पता कि मेन्यू ओवरफ्लो का पता कैसे लगाया जाए। अतिरिक्त मेनू-आइटम्स को "अधिक" ड्रॉपडाउन में कैसे स्थानांतरित करें?

मेरे पास एक बुनियादी संरचना और मार्कअप है।

फिडल: http://jsfiddle.net/xFW8t/347/

मार्कअप:

<ul class="nav nav-pills topnavi"> 
     <li class="active" ><a href="#">Dashboard</a></li> 
     <li ><a href="#">Docs</a></li> 
     <li ><a href="#">Docs 2</a></li> 
     <li ><a href="#">Docs 3</a></li> 
     <li ><a href="#">Docs 4</a></li> 
     <li ><a href="#">Data</a></li> 
     <li ><a href="#">iWeb</a></li> 
     <li ><a href="#">Program</a></li> 
     <li ><a href="#">Config</a></li> 
     <!-- <li ><a href="#">Smart Inside</a></li> 
     <li ><a href="#">Settings </a></li> 
     <li ><a href="#">Account</a></li> 
     <li ><a href="#">Types</a></li> 
     <li ><a href="#">Notifications</a></li> 
     <li ><a href="#">History</a></li> 
     <li ><a href="#">Redmine</a></li> 
     <li ><a href="#">Logout</a></li> --> 
     <li class="dropdown" > 
     <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle"> 
      More <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li ><a href="#">Settings </a></li> 
      <li ><a href="#">Account</a></li> 
      <li ><a href="#">Types</a></li> 
      <li ><a href="#">Notifications</a></li> 
      <li ><a href="#">History</a></li> 
      <li ><a href="#">Redmine</a></li> 
      <li class="divider" role="separator"></li> 
      <li><a href="#">Logout</a></li> 
     </ul> 
     </li> 
    </ul> 

सीएसएस:

.topnavi { 
    margin-top:26px; 
} 
.nav-pills.topnavi > li > a { 
    border-radius: 4px 4px 0 0; 
    background:#f2f2f2; 
    padding: 8px 12px; 
    font-size:12px; 
    color: #727272; 
    border:1px solid #e7e7e7; 
    border-bottom:none; 
} 
.nav-pills.topnavi > li.active > a, .nav-pills.topnavi > li.active > a:focus, .nav-pills.topnavi > li.active > a:hover { 
    background-color: #d9d9d9; 
    color: #5b5b5b; 
    border: none; 
} 
.nav-pills.topnavi > li + li { 
    margin-left: 3px; 
} 
.dropdown-menu 
{ 
    right:0px !important; 
    left:auto; 
} 

Answer 1

मैं "अधिक" मेनू से मेनू अतिप्रवाह अगली पंक्ति बंद करना चाहते हैं।

आपको सभी सूची आइटमों की कुल चौड़ाई की तुलना में मेनू की चौड़ाई के आधार पर अतिरिक्त सूची-आइटम एकत्र करना होगा और उन्हें एक अलग सूची में धक्का देना होगा।

मेरा यह जवाब से पाने (और बूटस्ट्रैप के लिए यह अनुकूल): https://stackoverflow.com/a/27450575/1355315

मार्कअप:

स्प्लिट दो ul रों में मेनू। मेनू के लिए एक और ड्रॉपडाउन के लिए एक।

<div class="menuwrap"> 
    <ul id="menu" class="nav nav-pills menu"> 
     ...<!-- This will contain all the menu items --> 
    </ul> 
    <ul class="nav nav-pills collect"> 
     ...<!-- This will contain the dropdown --> 
    </ul> 
</div> 

जावास्क्रिप्ट (jQuery) कोड टुकड़ा:

function collect() { 
    elemWidth = $menu.width(); 
    fitCount = Math.floor((elemWidth/varWidth) * ctr) - 1; 
    $menu.children().css({"display": "block", "width": "auto"}); 
    $collectedSet = $menu.children(":gt(" + fitCount + ")"); 
    $("#submenu").empty().append($collectedSet.clone()); 
    $collectedSet.css({"display": "none", "width": "0"}); 
} 

कहाँ:

1. $menu.width() मेनू
2. varWidth की चौड़ाई हो जाता है सभी की कुल चौड़ाई है मेनू आइटम
3. ctr मेनू आइटम की संख्या
4. fitCount मेनू आइटम है कि मेनू चौड़ाई
5. से अधिक सभी आइटम जो कदम # में ध्यान केंद्रित किया गया था 8
6. $collectedSet ऐसे सभी आइटम जो से अधिक जमा करता है की चौड़ाई रीसेट की संख्या हो जाता है मेनू चौड़ाई
7. ड्रॉपडाउन मेनू खाली करें और क्लोन एकत्रित आइटम
8. मूल आइटम की चौड़ाई शून्य पर सेट करें।http://jsfiddle.net/abhitalks/y0ypz38w/

   नोट:: इस छोटे से सरल मेनू और एक डेमो के लिए अच्छा है

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

।