Boostrap 3.2 के साथ: दो अलग-अलग ड्रॉपडाउन मेनू पर नावबार-राइट का उपयोग करते समय, वे थोड़ा ओवरलैप करते हैं। नीचे दिए गए कोड से सीधे है ड्रॉपडाउन उदाहरण बूटस्ट्रैप साइट पर, संशोधित किया गया ताकि एक के बजाय दाईं ओर दो ड्रॉपडाउन हों।
नीचे JSField स्निपेट नोट करें। सुनिश्चित करें कि रिजल्ट विंडो नेवबार को देखने के लिए पर्याप्त चौड़ी है, और फिर ड्रॉपडाउन 3 और 4 से अधिक माउस। आप "" उनके बस्ट ओवरलैप देखेंगे।
इस पर काम करने के बारे में कोई सुझाव?
http://jsfiddle.net/codespelunker/ysqjt7fv/2
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
उत्तर:
उत्तर № 1 के लिए 1हा तो मुद्दा एक छोटा सा था। लेकिन समस्या तब है जब आप अपने 2 को घोषित कर रहे हैं navbar-right div।
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4 <span class="caret"></span></a>
// This one was for dropdown 4
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
.
</ul> <-------------------------------------- here
<ul class="nav navbar-nav navbar-right"> <--- is the problem
//This one was for dropdown 3
<li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
</ul>
</li>
</ul>
उन दो पंक्तियों को बाहर निकालें और आपके पास उन्हें गोद में और सही क्रम में नहीं होना चाहिए
इसकी जाँच पड़ताल करो बेला
मुद्दा यह था कि आप उन दोनों को अलग-अलग विभाजनों के रूप में दाईं ओर धकेल रहे थे। एक div होने के बजाय उन्हें दाईं ओर धकेलें।
जवाब के लिए 0 № 2
आप इस शैली को जोड़ सकते हैं
#navbar-example .navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
http://jsfiddle.net/ysqjt7fv/5/