Bootstrap 4.5.0: Моя кнопка переключения отображается справа от изображения / имени моего бренда? Как мне расположить ее слева?

Question

У меня проблема, когда кнопка переключения отображается справа от изображения моего бренда. То же самое происходит, если я использую торговую марку. Вот как это выглядит.

I want the toggle to look like this.

I have searched for solutions but all of them are dealing with earlier versions of Bootstrap. I started having the problem when I upgraded the Bootstrap gem to 4.5.0.

Here is my html code.

   <% = link_to image_tag ("ibraini_navbar.png", class: "img-fluid navbar-brand" , alt: "# {t: page_title_home}"), home_path%>  

Вот соответствующий код CSS. Я не включил код, в котором я установил высоту навигационной панели для настройки размера изображения.

.navbar-custom .navbar-brand, .navbar-custom .navbar-header, .navbar-custom .navbar-nav { a { color: $linkColorHeader; } a:hover, a:focus { text-decoration: none; color: $linkColorHover; } }
.navbar-custom .navbar-toggler { color: $linkColorHover; @include font-size(24px); border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #599ed7; color: $linkColorHeader; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active, .navbar-custom .navbar-brand:focus { outline: 0; }

У меня такая же проблема, если я использую название бренда. Переключатель по-прежнему расположен справа от имени.

У меня есть аналогичные html и css коды в другой программе, которая работает как второе изображение.

Я проверил текущая документация, и в ней говорится, что по умолчанию переключатель перемещается влево, чего я и хочу. У меня никогда не было такой проблемы с тумблером. Надеюсь, есть кое-что, чего я не вижу, что можно легко исправить.

Answer 1

Я еще раз взглянул на документацию Bootstrap. Я понял, что класс «navbar-header» больше не существует в Bootstrap 4.5.0. Я переписал свою разметку, чтобы она выглядела как документация, найденная здесь .

Разметка в моем вопросе исчезла. Вот мой новый код.

<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>

  <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            
    <%= link_to locale_root_path(anchor: "overview"), class: "navbar-brand page-scroll" do %>
      <span class="text-red">Light</span><span class="text-blue">Be Corp</span>
    <% end %>

    ......

  </div>

</nav>

У меня есть переключатель влево без названия бренда, как и ожидалось. Все мои веб-сайты нужно будет изменить. Вот почему мое второе изображение показывает название бренда.

Answer 2

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand text-light" href="#">
      <img src="" alt="logo-here" style="width:40px;"> Brand Name
  </a>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link text-light" href="#">Link Here</a>
      </li>


    </ul>
  </div>
</nav>