【问题标题】:navbar toggle not appearing导航栏切换未出现
【发布时间】:2015-01-31 08:41:07
【问题描述】:

当我调整浏览器(IE 和 Chrome)的大小时,导航会正确消失,但切换不会出现。我遵循了引导网站上的代码,但我不确定我错过了什么。先感谢您。 这是我的代码 sn-p:

<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="glyphicon glyphicon-menu-hamburger"></span>
               </button>
           </div>
            <div class="collapse navbar-collapse" id="menu-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

【问题讨论】:

  • 你能把它放在一个 jsfiddle 里吗?
  • 您是否包含了 jQuery 和 Bootstrap javascript?似乎与他们一起工作:jsfiddle.net/9vqpe2pe

标签: css twitter-bootstrap-3 navbar


【解决方案1】:

您的代码看起来很棒,我唯一不同的是删除折叠的类并将 data-target 属性 menu-collapse id 更改为一个类。我在这里重建了导航:

[http://www.bootply.com/xcsJFk9jpA][1]
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="site-template.html">Site Brand</a>
              </div>

              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="index.html">Home</a></li>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="clients.html">Clients</a></li>
                  <li><a href=" contact.html">Contact</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a><!--This link dose not go anywhere it is like the intro to the dropdown list.It is used to power the drop down menu. There are going to be social links in the drop down. -->
                      <ul class="dropdown-menu">
                        <li><a href="http://facebook.com">Facebook</a></li>
                        <li><a href="http://twitter.com">Twitter</a></li>
                        <li><a href="http://plus.google.com">Google</a></li>
                        <li><a href="http://www.linkedin.com">LinkedIn</a></li>
                      </ul>
                  </li>
                </ul>
              </div>
            </nav>
<!-- End Navigation -->

【讨论】:

  • 感谢您的反馈。问题根本不在于引导程序,我有一个 css 文件,一旦我删除一切都很好,我就忘记了。
猜你喜欢
  • 2017-11-16
  • 2018-02-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-16
  • 2020-04-07
  • 1970-01-01
相关资源
最近更新 更多