导航栏不会崩溃

时间:2016-04-23 01:08:13

标签: jquery html5 twitter-bootstrap-3

单击图标后,导航菜单会展开,选择项目后会将我带到正确的部分,但不会崩溃。

抱歉,我不确定我应该添加多少代码,我会处理你给我的内容并删除其他内容,以便稍后提交更多内容。

提前感谢您的帮助。

<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
  <div id="navbar-main">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon icon-hammer" style="font-size:30px; color:#3498db;"></span>
          </button>
          <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-hammer" style="font-size:18px; color:#3498db;"></span></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li> <a href="#home" class="smoothScroll">Home</a></li>
            <li> <a href="#about" class="smoothScroll"> About</a></li>
            <li> <a href="#walkways" class="smoothScroll"> Walkways</a></li>
            <li> <a href="#patios" class="smoothScroll"> Patio's</a></li>
            <li> <a href="#walls" class="smoothScroll"> Walls</a></li>
            <li> <a href="#fireplace" class="smoothScroll"> Fireplace</a></li>
            <li> <a href="#team" class="smoothScroll"> Team</a></li>
            <li> <a href="#contact" class="smoothScroll"> Contact</a></li>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </div>

1 个答案:

答案 0 :(得分:1)

您需要在代码中包含其他部分

这是来自以下页面的响应式导航栏标题的示例 http://getbootstrap.com/components/#navbar-default 请注意以下

class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"

所以你需要添加它,数据目标是你试图扩展的nav div的id或类

<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>