Центрирование кнопки переключения Navbar

Question

Кнопка-переключатель Bootstrap navbar перемещается к центру при свертывании и затем возвращается в правильное положение справа при нажатии.

Я попытался скопировать код с веб-сайта начальной загрузки снова, но безрезультатно,Кнопка все еще плавает к центру.

<!-- 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-обертка для панели навигации.

Ссылка: Bootstrapnavbar docs

Надеюсь, это поможет 101