在自舉導航欄右上方浮動時，多個下拉菜單重疊

Question

使用Boostrap 3.2：在兩個不同的下拉菜單上使用導航欄右鍵時，它們會略微重疊。下面的代碼直接來自Bootstrap站點上的Dropdown examples，因此修改了右側的兩個下拉列表而不是一個下拉列表。

請注意下面的JSFiddle片段。確保「結果」窗口足夠寬以查看導航欄，然後將鼠標懸停在下拉列表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> 

Answer 1

哈所以問題是一個小的。但問題是當你宣佈你的第二個navbar-right股利。

<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> 

取出這兩條線，你應該讓他們不超過一圈，以正確的順序

退房的fiddle

的問題是，你讓他們都推到了正如獨立的div一樣。而不是讓一個div推到右邊。

Answer 2

您可以添加這種風格

#navbar-example .navbar-nav.navbar-right:last-child { 
    margin-right: 0px; 
} 

http://jsfiddle.net/ysqjt7fv/5/