Html 导航栏切换按钮居中

引导导航栏切换按钮在折叠时向中心浮动，然后在单击时返回右侧的正确位置

我试图再次从bootstrap网站复制代码，但没有成功，按钮仍然朝中心浮动

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="img/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon">      
</span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="day_map.html">Daytime Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="night-map.html">Nighttime Map<a>
</li>
</ul>
</div>
</div>
</nav>

夜间地图

---

我希望切换按钮在折叠时保持在右侧。

您就快到了，只需更改元素的顺序，将切换组件作为最后一项，它将显示在最右侧

以下是工作代码：

夜间地图

从导航栏中删除ml auto谢谢，我已经尝试过了，但它只改变了对齐方式。折叠时，切换器仍会浮动到中心。只需重新排列元素的顺序，切换就在末尾。那会有用的。