Question

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>

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

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

希望有帮助

导航栏切换按钮居中

1 个答案: