html - 导航栏切换按钮居中

Question

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

我再次尝试从 bootstrap 网站复制代码，但无济于事，按钮仍然向中心 float 。

<!-- 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>

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

Answer 1

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

这是工作代码:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
    
  <a class="navbar-brand" href="index.html">
<img src="https://cdn.worldvectorlogo.com/logos/bootstrap-4.svg" height="30">
  </a>
    
  <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>
    
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>

</nav>

我还稍微改进了您的代码，您不需要为导航栏使用 .container-fluid 包装器 div。

引用:Bootstrap navbar docs