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

Question

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

这是 fiddle

问题是......它在桌面和大屏幕上运行良好。

如果我调整浏览器窗口的大小。调整大小时，下拉菜单会进入一个 ListView ，其中包含整个屏幕的宽度。

重新调整结果窗口的大小，您就会知道我的问题。

帮我克服这个问题。

提前致谢。

Answer 1

这不是使用 Bootstrap 的真正方式 navbar . navbar的想法是它在移动设备上崩溃了，这就是您在这里看到的情况。除了，在 Bootstrap navbar , you are supposed to put some containers with specific class names和一个 <button>等等 你的​​代码似乎正在使用 navbar-right为了让它正确 float 。

试试这个。这是 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