Bootstrap 4 значок navbar-toggler не отображается
Посещение: https://jsfiddle.net/8tpm4z00/
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">KP</a>
<div class="collapse navbar-collapse" id="myNavigation">
<div class="navbar-nav">
<a class="p-3 nav-item nav-link active " href="#">Home</a>
<a class="p-3 nav-item nav-link " href="#">About</a>
<a class="p-3 nav-item nav-link " href="#">Contact Me</a>
</div><!-- <div class="navbar-nav"> -->
</div><!-- <div class="collapse navbar-collapse"> -->
</div><!-- <div class="container"> -->
.navbar-toggler-icon
не появляется на кнопке-переключателе навигационной панели, когда меню свернуто для мобильной реакции.
Я искал об этой проблеме и настроил также ссылки jquery и bootstrap. Поместив ссылку jquery над начальной загрузкой 4 ссылки. Но это не похоже на работу. Внешние библиотеки связаны в моем HTML в том же порядке, что и jsfiddle.
Ответы
Ответ 1
Используйте navbar-inverse bg-inverse
вместо .navbar-default
<section role="navigation">
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">KP</a>
<div class="collapse navbar-collapse" id="myNavigation">
<div class="navbar-nav">
<a class="p-3 nav-item nav-link active " href="#">Home</a>
<a class="p-3 nav-item nav-link " href="#">About</a>
<a class="p-3 nav-item nav-link " href="#">Contact Me</a>
</div><!-- <div class="navbar-nav"> -->
</div><!-- <div class="collapse navbar-collapse"> -->
</div><!-- <div class="container"> -->
</nav>
</section>
Обновленная скрипка
Обновление:
navbar-inverse
больше не доступен в версии B4, вместо этого вы можете использовать navbar-dark
.
Ответ 2
Если вы используете бета-версию Bootstrap 4:
Вы можете добавить только navbar-dark класс в тег nav.
Результат:
<nav class = "navbar navbar-expand-lg navbar-dark fixed-top navbar-default" role = "navigation">
<a class="navbar-brand" href="#">
<img class = "img-responsive logo" src = "~/Content/Images/ogo__160x36.png" alt = "" />
</a>
<button type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#menuPrincipal" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
<span class = "navbar-toggler-icon"> </ span>
</button>
<div class="collapse navbar-collapse" ...>...</div>
</nav>
Ответ 3
Используйте navbar-dark вместо navbar-inverse и bg-dark также вместо bg-inverse
<nav class="navbar navbar-dark navbar-expand-md bg-dark ">