Логотип в Bootstrap NavBar сдвигает гамбургер влево, когда браузер маленький
Единственным способом было бы знать, что существует ограниченный набор сжатых форматов данных. Затем вы можете начать декодировать, используя все эти форматы. Если вы работаете на некотором разумном расстоянии (например, сто или около того), то существует очень высокая вероятность того, что это незашифрованный сжатый поток.
2 ответа
Переключатель просто переносится на следующую строку, основываясь на ширине .navbar-brand, и это ожидаемое поведение для его выравнивания по левому краю. Если вы хотите, чтобы переключатель всегда был выровнен по правому краю, добавление класса ml-auto будет работать.
<button class="navbar-toggler ml-auto" ...
См. https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins
. Используйте flex-nowrap класс начальной загрузки для своего navbar. Прочитайте некоторую информацию о документации здесь. >
Свойство flex-wrap указывает, следует ли переносить гибкие элементы.
Также избегайте использования ширины и высоты на изображении с логотипом, потому что это создает дополнительное пространство между логотипом и элементом nav следующим образом:
[ 1115]
Вместо этого используйте 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>