Twitter Bootstrap 3-下拉菜单中的导航栏右问题

Question

我使用navbar-right创建了两个下拉菜单。

这是它的小提琴 。

问题是...在台式机和大屏幕上运行正常。

如果我调整浏览器窗口的大小。 调整大小后，下拉列表将进入列表视图，并具有整个屏幕的宽度。

调整结果窗口的大小，您将了解我的问题。

帮我克服这个问题。

提前致谢。

Answer 1

这实际上不是使用Bootstrap navbar 。 navbar的想法是，它会在移动设备上崩溃，这就是您在此处看到的情况。 除了在Bootstrap navbar ， 您应该放置一些具有特定类名和<button>等的容器 。您的代码似乎只是在使用navbar-right以便将其正确浮动。

试试这个吧。 它是1个列表，每个<li>都有一个下拉列表。 没有navbar类。 请注意，我已经添加了nav类。 这只是给<a>悬停等添加了一些填充和颜色。您可以根据需要删除该类和样式。 我还添加了“ pull-right”类，它是Bootstrap的用于浮动右的辅助类。

<div>
    <ul class="pull-right nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-comment"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">One</a></li>
                <li> <a href="#">Two</a></li>
                <li> <a href="#">Three</a></li>
            </ul>
        </li>
    </ul>
</div>

一些CSS

div > ul > li {
    float: left;
}

这不会像navbar那样反应灵敏，但这首先就是问题所在。

DEMO