Question

使用Boostrap 3.2：在两个不同的下拉菜单中使用navbar-right时，它们略有重叠。下面的代码直接来自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 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>

取出这两条线，你应该让它们不是一圈又按正确的顺序

查看fiddle

问题是你让他们都被推到右边作为单独的div。而不是让一个div将它们推向右边。

Answer 2

您可以添加此款式

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

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

浮动直接在Bootstrap Navbar上时，多个下拉列表重叠

2 个答案: