Question

访问：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链接放在bootstrap 4链接之上。但这似乎不起作用。外部库在我的HTML中以与jsfiddle相同的顺序链接。

Answer 1

如果您使用bootstrap 4 beta：

您只能在 nav 标记中添加 navbar-dark classe。

结果：

<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>

Answer 2

使用# yumdownloader <package>代替navbar-inverse bg-inverse

.navbar-default

Updated fiddle

更新：

B4版本中不再提供

<section role="navigation"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"> <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> </div> </nav> </section>，您可以使用navbar-inverse代替。

Answer 3

使用 navbar-dark 代替 navbar-inverse ，并且使用bg-dark代替bg-inverse

  <nav class="navbar navbar-dark navbar-expand-md bg-dark ">

Answer 4

如果您不使用navbar-light或dark设置background-img，请将某些图像放入.navbar-toggler-icon中，如下所示

.navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}

或使用可怕的字体中的fa-bars

Bootstrap 4 navbar-toggler-icon不会出现

4 个答案:

如果您使用bootstrap 4 beta：