logo标签列表

Bootstrap 4导航栏切换图标未显示

javascriptjqueryhtmlcsstwitter-bootstrap
31

访问：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中相同。

5个回答
23

更新：

navbar-inverse在B4版本中已不可用，您可以使用navbar-dark替代。

请使用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>

更新后的代码片段

1
如果您不想要一个深色的导航栏，该如何让它显示出来？ - RobbieE
15

如果您使用Bootstrap 4 beta版本：

您只能将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>
2
谢谢，我一直在费尽心思弄清楚为什么这个现在不工作了，现在版本4已经稳定了。 - Martin Sheeks
1
你还需要使用 bg-dark，而且没有 navbar-default。 - Carol Skelly
6

如果您不使用navbar-light或者dark，请按照以下方式在.navbar-toggler-icon中设置background-img的一些图像。

.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);
}

或者使用Font Awesome提供的fa-bars图标

这是我的问题，尽管发布的代码似乎有问题。可能是缺少一个单引号。 - Heriberto Lugo
.navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(92,46,78, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } 将stroke='rgba更改为适合您解决方案的内容;-) - dotnet-provoke
4

使用 navbar-dark 替代 navbar-inverse，bg-dark也替代了bg-inverse

  <nav class="navbar navbar-dark navbar-expand-md bg-dark ">
1
我已经将 class="navbar-toggler" 替换为 class="btn"。
代码看起来是这样的：
<!--Toggler-->
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

它有效。

这个工作的描述会很有用。 :) - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接