如何使用引导同时将汉堡菜单及其下拉菜单定位在右侧?

Question

我的链接在右侧，左侧没有导航栏。

当屏幕变小时，我希望汉堡包在不移动到左侧的情况下替换这些链接。

我添加了<a href="#"></a>作为徽标占位符，将汉堡菜单推到右侧，但菜单仍在左侧打开。

代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<a href="#"></a>
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQ</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>
</div>
</nav>

Answer 1

我认为这就是你要的 或 我不明白你的问题

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<a href="#"></a>
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-auto"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item ml-auto"><a href="#" class="nav-link">FAQ</a></li>
<li class="nav-item ml-auto"><a href="#" class="nav-link">Contact Us</a></li>
</ul>
</div>
</nav>