Логотип в Bootstrap NavBar сдвигает гамбургер влево, когда браузер маленький

Question

Я сегодня что-то пробовал.В Bootstrap NavBar, если логотип (navbar-бренд) только текст, то гамбургер остается справа.Но если логотип является изображением, гамбургер смещается влево при изменении размера браузера.Я не могу понять это.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />
      </a>
      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse id=" navbarSupportedContent>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">Home</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

введите описание изображения здесь

Answer 1

Используйте flex-nowrap класс начальной загрузки для вашего navbar. Прочитайте некоторую информацию о документации здесь https://getbootstrap.com/docs/4.2/utilities/flex/#wrap

Из w3schools

Свойство flex-wrap указывает, должны ли гибкие элементы завернуть или нет.

Также избегайте использования ширины и высоты на изображении с логотипом, потому что это создает дополнительное пространство между логотипом и навигационным элементом, например так:

Используйте width: 30% на .navbar-brand вместо этого и установите width: 100% на изображение логотипа.

Я обновил ваш код, пожалуйста, проверьте:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<section id="title">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">
      <a class="navbar-brand" href="#" style="width: 30%;">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />
      </a>
      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse id=" navbarSupportedContent>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">Home</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

Answer 2

Переключатель просто переносится на следующую строку, основываясь на ширине .navbar-brand, и это ожидаемое поведение для выравнивания по левому краю.Если вы хотите, чтобы переключатель всегда был выровнен по правому краю, добавьте, что класс ml-auto работает.

<button class="navbar-toggler ml-auto" ...

См. https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins