html - Bootstrap Transparent Navbar - 移动折叠菜单图标消失

Question

在最终让导航栏看起来像我想要的那样 - 带有白色链接的略微透明的黑色 - 折叠的图标不会显示在移动设备上。链接在那里并且正在运行，但没有图标。我在这里缺少什么？

这是导航栏:

    <nav class="navbar transparent navbar-fixed-top" role="navigation">
      <nav class="navbar-inner">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#example-nav-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">EMILY STEWART VIOLIN</a></div>
    <div class="collapse navbar-collapse" id="example-nav-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.html">HOME</a></li>
              <li><a href="music.html">MUSIC</a></li>
              <li><a href="pedagogy.html">PEDAGOGY</a></li>
              <li><a href="blog.php">BLOG</a></li>
              <li><a href="contact.html">CONTACT</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </nav>

这是 CSS:

.navbar.transparent .navbar-inner {
       background: rgba(0,0,0,0.4);
       color: #ffffff;
    }
    .navbar.transparent .navbar-inner li a {
        color: #ffffff;
        font-family: "Raleway";
        font-size: 10pt;
        letter-spacing: 3pt;
    }
    .navbar.transparent .nav > li > a:focus,
    .navbar.transparent .nav > li > a:hover {
      color: #666666;
      text-decoration: none;
      background-color: transparent;
    }
    .button.navbar-toggle.collapsed:focus,
    .button.navbar-toggle.collapsed:hover {
      color: #666666;
    }
    .navbar.transparent .navbar-brand:hover, 
     .navbar.transparent .navbar-brand:focus {
      background-color: transparent;
      color: #ffffff;
    }
    .navbar.transparent .navbar-brand{
      background-color: transparent;
      color: #ffffff;
      font-family: "Tenor Sans";
      font-size: 16pt;
      letter-spacing: 1pt;
    }

这是我的网站:Site

Answer 1

您需要在 nav 元素上包含 .navbar-default 或 .navbar-inverse 类以生成正确的 Bootstrap 样式.否则，您需要自己设计按钮的样式。

<nav class="navbar navbar-default transparent navbar-fixed-top" role="navigation">

或

<nav class="navbar navbar-inverse transparent navbar-fixed-top" role="navigation">

查看 documentation 中的示例.