推特引导3 -导航栏右问题下拉

Twitter Bootstrap 3 - navbar-right issue in dropdown

本文关键字：问题 导航      更新时间：2023-09-26

我用navbar-right创建了两个下拉列表。

这里是，请点击查看。

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

如果我调整浏览器窗口的大小。当重新调整大小时，下拉列表将显示整个屏幕的宽度。

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

帮我克服这个。

这不是真正使用Bootstrap navbar的方式。navbar的理念是它在移动设备上崩溃，这就是你在这里看到的。除了，在引导navbar中，您应该放置一些具有特定类名和<button>等的容器。你的代码似乎只是使用navbar-right为了浮动它的权利。

试试这个。这是一个列表，每个<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那样响应，但这似乎是问题所在。

相关文章：