javascript - How to vertically stack navbar elements on collapse expansion -

जब मैं navbar-collapse बटन पर क्लिक करता हूं, navbar से तत्व < / कोड> विस्तृत लेकिन वे खड़ी गठबंधन नहीं कर रहे हैं। आप link5 और Link6 को navbar पर दायां-संरेखित करके कैसे रख सकते हैं?

यहां JSFiddle है:

संपादित करें: नेवि-गोलियां समस्या होने लगता है। अगर मैं इसे navbar-nav से बदलता हूं, तो यह स्वचालित रूप से खड़ी हो जाती है I उस स्थिति में nav-pills प्रभाव को पुनः बनाने का एक तरीका है?

<पी > आप फ्लेक्सबॉक्स प्रॉपर्टी का उपयोग कर सकते हैं फ्लेक्स-दिशा: कॉलम इसे ऊर्ध्वाधर आशा से ढकने के लिए यह आपकी मदद करेगा

  शरीर {width: 100% margin: auto; पृष्ठभूमि रंग: # f7f7f7; } .navbar {background: #FFFFFF} .nav {width: 100%} .nav {font-family: 'Raleway', sans-serif; रंग: # 5a5a5a; फ़ॉन्ट आकार: 13 पीएक्स; फोंट की मोटाई: बोल्ड; टेक्स्ट-ट्रांस्फ़ॉर्म: अपरकेस; } उल {प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: स्तंभ; } .nav li {display: inline; }। सामग्री {मार्जिन-टॉप: 100px; }  

  & lt; title & gt; नेवाबर टेस्ट & lt; / title & gt; & Lt; link href = 'http: //fonts.googleapis.com/css? परिवार = रैलीवे: 400,100' rel = 'स्टाइलशीट' प्रकार = 'टेक्स्ट / सीएसएस' & gt; & Lt; link href = "http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel = "स्टाइलशीट" & gt; & Lt; link rel = "स्टाइलशीट" href = "texthover_test.css" & gt; & LT; बॉडी & gt; & Lt; div class = "navbar navbar-default navbar-fixed-top" & gt; & Lt; div वर्ग = "कंटेनर" & gt; & Lt; div class = "navbar-header" & gt; & Lt; बटन प्रकार = "बटन" वर्ग = "नेविबार-टॉगल" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# उदाहरण" & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; span class = "icon-bar" & gt; & lt; / span & gt; & Lt; / बटन & gt; & Lt; / div & gt; & Lt; div वर्ग = "पतन नवबार-पतन" id = "उदाहरण" & gt; & Lt; ul class = "nav nav-pills" & gt; & Lt; li & gt; & lt; a href = "#" & gt; लिंक 1 & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; लिंक 2 & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; लिंक 3 & lt; / a & gt; & Lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; लिंक 4 & lt; / a & gt; & Lt; / li & gt; & Lt; li वर्ग = "पुल-दायें" & gt; & lt; a href = "#" & gt; लिंक 5 & lt; / a & gt; & Lt; / li & gt; & Lt; li वर्ग = "पुल-दायें" & gt; & lt; a href = "#" & gt; लिंक 6 & lt; / a & gt; & Lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & lt; / स्क्रिप्ट & gt; & LT; स्क्रिप्ट src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; / body & gt; & Lt; / html & gt;