Twitter bootstrap 引导导航栏未出现

我有以下

nav

代码（见下文），但它不工作

具体来说，这些链接根本就没有出现。当我缩小屏幕时，图标栏会显示出来，但当我点击它们时，什么也不会出现。这就像整个

nav collapse

div被隐藏了一样

我试图制作一个JSFIDLE，但它看起来更糟，我认为这是因为我不确定如何将引导添加到JSFIDLE

我还为导航栏元素添加了一些样式。下面是相关的

CSS

，以防可能是罪魁祸首

.navbar{
顶部：10px；
左：0px；
高度：22px；
z指数：20；
宽度：100%；
背景色：#D2B48C；
字体大小：16px；
字体大小：粗体；
文本对齐：居中；
位置：相对位置；
宽度：85%；
保证金：0px自动；
-moz盒阴影：10px 10px 5px#333；
-网络工具包盒阴影：10px 10px 5px#333；
盒影：10px 10px 5px#333；
}
.导航栏内部{
背景色：#D2B48C；
位置：绝对位置；
保证金权利：-50%；
左：50%；
转换：翻译（-50%，-50%）；
最高：50%；
}
.导航栏.集装箱{
背景色：#D2B48C；
位置：绝对位置；
保证金权利：-50%；
左：50%；
转换：翻译（-50%，-50%）；
最高：50%；
}
.导航崩溃{
背景色：#D2B48C；
颜色：#355E3B；
z指数：20；
}
.崩溃{
背景色：#D2B48C；
}
.导航崩溃{
身高：100%；
}
.nav.ul li{
显示：内联；
填充：0 20px；
颜色：#355E3B；
身高：100%；
}
.导航按钮{
填充：0 50px；
文本转换：大写；
背景色：#D2B48C；
颜色：#355E3B；
}

主页
服务
设施
培训师
联系人

这是来自的html，看起来您缺少

导航栏标题

。确保您正确地遵循html

<nav class="navbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" 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>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

切换导航

这是来自的html，看起来您缺少

导航栏标题

。确保您正确地遵循html

<nav class="navbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" 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>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

切换导航

您没有说您使用的是哪个版本的引导，我想是3.x。但是你的代码不符合Bootstrap的标准。 我认为要切换导航，

图标栏必须位于导航栏标题中。另外，我也不知道（也许你可以）你是否能在一个类上
数据目标

您应该尝试以下代码：

<div class="navbar">
      <div class="container-fluid">
              <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggleId">
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                    </button>
                    <!-- <a class="navbar-brand" href="#">MySite</a> -->
              </div>
              <div class="collapse navbar-collapse" id="toggleId">
                <ul>
                    <li class="navbutton" id="home_button"><a href="#">home</a></li>
                    <li class="navbutton" id="services_button"><a href="#">services</a></li>
                    <li class="navbutton" id="facility_button"><a href="#">facility</a></li>
                    <li class="navbutton" id="trainers_button"><a href="#">trainers</a></li>
                    <li class="navbutton" id="contact_button"><a href="#">contact</a></li>
                </ul>
            </div>
      </div>
</div> 









您没有说您使用的是哪个版本的引导，我想是3.x。但是你的代码不符合Bootstrap的标准。
我认为要切换导航，
图标栏必须位于导航栏标题中。另外，我也不知道（也许你可以）你是否能在一个类上
数据目标

您应该尝试以下代码：

<div class="navbar">
      <div class="container-fluid">
              <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggleId">
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                    </button>
                    <!-- <a class="navbar-brand" href="#">MySite</a> -->
              </div>
              <div class="collapse navbar-collapse" id="toggleId">
                <ul>
                    <li class="navbutton" id="home_button"><a href="#">home</a></li>
                    <li class="navbutton" id="services_button"><a href="#">services</a></li>
                    <li class="navbutton" id="facility_button"><a href="#">facility</a></li>
                    <li class="navbutton" id="trainers_button"><a href="#">trainers</a></li>
                    <li class="navbutton" id="contact_button"><a href="#">contact</a></li>
                </ul>
            </div>
      </div>
</div> 









找到了答案

当我要查看最新的CSS引导文件时，我显然忽略了链接到最新的引导JS文件！我把它和导航工作都包括进去了。我仍然需要清理一下，但现在我可以看到它至少这样做

谢谢大家的帮助
 找到了答案

当我要查看最新的CSS引导文件时，我显然忽略了链接到最新的引导JS文件！我把它和导航工作都包括进去了。我仍然需要清理一下，但现在我可以看到它至少这样做

谢谢大家的帮助
 这几乎做到了。导航项再次显示并工作，但a）它们在消失之前开始移动到屏幕大小的下一行-我如何更改它们切换的宽度？还有，b）当它们消失时，我看不到图标栏出现。我在导航栏的中间找到了一个理论上可以点击的点，但当我点击它时什么也没发生。因此，取得了一些进展。我会显示图标栏，但单击时什么也没有显示。但事情是这样的。当我把它们放到JSFIDLE中时，它就工作了。还有，什么时候