Bootstrap 导航栏不工作

Question

这只是我在 Stack overflow 上提出的第二个问题，因此如果您需要任何其他信息或需要对我所说的任何内容进行说明，请随时提出。我试着调查这个问题，确实发现这里有些人有类似的问题，但是 none 对他们有帮助的修复对我有用。

我希望在 max width 不超过 767px. 时隐藏我的导航栏当它低于该像素数量时，它应该变成一个应该折叠的下拉菜单并在单击按钮时展开。这似乎对我不起作用。

我的代码如下

HTML

<header class="pull-center" id="masthead">
  <nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div id="img1"></div>
        <div id="img2"></div>
        <div id="img3"></div>
        <div id="img4"></div>
        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <a class="brand brand-ctg" href="#section-1"><span></span></a>
            CTG
            <span></span>
        </a>
        <div class="nav-collapse">
            <ul class="nav">
                <li><a href="#section-2">Demo Reel</a></li>
                <li><a href="#section-3">Portfolio</a></li>
                <li><a class="brand brand-ctg" href="#section-1"> <span></span></a></li>
                <li><a href="#section-4">Contact</a></li>
                <li><a href="http://www.colortheblog.com" target="_blank">Blog</a></li>
            </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

CSS

    @media (max-width: 767px) {
    .nav-collapse .nav > li {
        float: left !important;
    }
    .navbar .in .nav li {
       display: block;
       float: none;
       width:100%;
    }
    .navbar .nav > li > a {
        color: #fff !important;
        float: none;
        margin-right: -3px !important;
        padding: 0 40px 10px !important;
        text-decoration: none;
    }
    .navbar .nav {
        margin-top: 0 !important;
        position: fixed!important;
        z-index: 1;
    }
    .nav-collapse .brand {
        display: block !important;
    }
    .navbar .nav .active a,
    .navbar .nav > li > a:hover,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        background-color: transparent;
        box-shadow: none;
        color: #2d2e2d !important;
    }
    .navbar-fixed-top,
    .navbar-fixed-bottom,
    .navbar-static-top {
        margin-left: -20px;
        margin-right: -20px;
    }
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        position: static;
    }
    .navbar-fixed-top {
        margin-bottom: 30px;
    }
    .navbar-fixed-bottom {
        margin-top: 30px;
    }
    .navbar-fixed-top .navbar-inner,
    .navbar-fixed-bottom .navbar-inner {
        padding: 5px;
    }
    .navbar .container {
        width: auto;
        padding: 0;
    }
    .navbar .brand {
        margin: -10px 40px 0 0;
    }
    .nav-collapse {
        clear: both;
    }
    .nav-collapse .nav {
        float: none;
        margin: 0 0 15px;
    }
    .nav-collapse .nav > li {
        float: none;
    }
    .nav-collapse .nav > li > a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > .divider-vertical {
        display: none;
    }
    .nav-collapse .nav .nav-header {
        color: #555555;
        text-shadow: none;
    }
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        padding: 9px 15px;
        font-weight: bold;
        color: #555555;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    .nav-collapse .btn {
        padding: 4px 10px 4px;
        font-weight: normal;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .nav-collapse .dropdown-menu li + li a {
        margin-bottom: 2px;
    }
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .dropdown-menu a:hover {
        background-color: #f2f2f2;
    }
    .navbar-inverse .nav-collapse .nav > li > a,
    .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #999999;
    }
    .navbar-inverse .nav-collapse .nav > li > a:hover,
    .navbar-inverse .nav-collapse .dropdown-menu a:hover {
        background-color: #111111;
    }
    .nav-collapse.in .btn-group {
        margin-top: 5px;
        padding: 0;
    }
    .nav-collapse .dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        float: none;
        display: none;
        max-width: none;
        margin: 0 15px;
        padding: 0;
        background-color: transparent;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .nav-collapse .open > .dropdown-menu {
        display: block;
    }

    .nav-collapse .dropdown-menu:before,
    .nav-collapse .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .dropdown-menu .divider {
        display: none;
    }
    .nav-collapse .nav > li > .dropdown-menu:before, .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .navbar-form,
    .nav-collapse .navbar-search {
        float: none;
        padding: 15px 15px;
        margin: 15px 0;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-inverse .nav-collapse .navbar-form,
    .navbar-inverse .nav-collapse .navbar-search {
        border-top-color: #111111;  
        border-bottom-color: #111111;
    }
    .navbar .nav-collapse .nav.pull-right {
        float: none;
        margin-left: 0;
    }
    .nav-collapse,
    .nav-collapse.collapse {
        overflow: hidden;
        height: 0;
        background: #3b3b3b;
    }
    .navbar .btn-navbar {
        background:url(http://www.colorthegrayscale.com/images/icons/hover-teal.png);
        display: block;
        width: 25px;
        height: 50px;
        position: fixed;
    }
    .navbar-static .navbar-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
    .navbar .brand.brand-ctg span {
        display: none !important;
    }

编辑 1 试图修复它，但仍然有我的问题。我知道一些 CSS 使切换按钮不起作用，我似乎无法弄清楚是什么。为了简单地把我所有的作品展示在一个地方，你可以找到测试站点here

Answer 1

您在不需要时覆盖了 bootstrap CSS 样式，因此这里是一个基于 twitter bootstrap 的简单 navbar 示例：

Bootply DEMO

片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

查看推特 Bootstrap Navbar Docs

编辑：根据您的comment/updated问题

这是您的问题：

<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <!-- <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> -->
                <a class="brand brand-ctg" href="#section-1"><span>CTG</span></a>
</a>

您正在另一个 a 中打开一个 a，这是无效的 HTML。以下是修复方法（根据文档）：

<button type="button" class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="brand brand-ctg" href="#section-1"><span>CTG</span></a>

编辑 2：

我正在寻找，您使用的是旧版本的 bootstrap.css (v.2.2.1)，最新的稳定版是 3.3.6，您缺少 bootstrap.js（这使折叠时触发的菜单）

Bootstrap 导航栏不工作

Bootstrap Navigation Bar Not Working

html

css

nav

twitter-bootstrap

twitter-bootstrap-3

片段

编辑：根据您的comment/updated问题

编辑 2：