Bootstrap 导航栏未出现

Question

我有以下 nav 代码（见下文）但它不起作用。

具体来说，链接根本就没有显示。当我缩小屏幕时，图标栏会出现，但是当我点击它们时，什么也没有出现。就好像整个 nav-collapse div 都被隐藏了一样。

我尝试制作一个 JSFiddle，但它看起来更糟，我认为这是因为我不确定如何将 Bootstrap 添加到 JSFiddle。

我还为导航栏元素添加了一些样式。以下是相关的 CSS，以防万一可能是罪魁祸首。

.navbar {
  top: 10px;
  left: 0px;
  height: 22px;
  z-index: 20;
  width: 100%;
  background-color: #D2B48C;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  position: relative;
  width: 85%;
  margin: 0px auto;
  -moz-box-shadow: 10px 10px 5px #333;
  -webkit-box-shadow: 10px 10px 5px #333;
  box-shadow: 10px 10px 5px #333;
}

.navbar-inner {
  background-color: #D2B48C;
  position: absolute;
  margin-right: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.navbar .container {
  background-color: #D2B48C;
  position: absolute;
  margin-right: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.nav-collapse {
  background-color: #D2B48C;
  color: #355E3B;
  z-index: 20;
}

.collapse {
  background-color: #D2B48C;
}

.nav-collapse ul {
  height: 100%;
}

.nav-collapse ul li {
  display: inline;
  padding: 0 20px;
  color: #355E3B;
  height: 100%;
}

.navbutton {
  padding: 0 50px;
  text-transform: uppercase;
  background-color: #D2B48C;
  color: #355E3B;
}

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="nav-collapse collapse">
        <ul>
          <li class="navbutton" id="home_button">home</li>
          <li class="navbutton" id="services_button">services</li>
          <li class="navbutton" id="facility_button">facility</li>
          <li class="navbutton" id="trainers_button">trainers</li>
          <li class="navbutton" id="contact_button">contact</li>
        </ul>
      </div>
    </div>
  </div>
</div>

想法？

谢谢！

Answer 1

这是 bootstrap example page 中的 html，您好像遗漏了 navbar-header。确保您正确遵循 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>

Answer 2

你没有说你使用的 Bootstrap 是哪个版本，我想 3.x。但是您的代码不符合 Bootstrap 的标准。我认为要切换导航的 icon-bar 必须位于 navbar-header 中。我也不知道（也许你可以）你是否可以在 class 上 data-target。

你应该试试这个代码：

<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>

Answer 3

想通了！！！

虽然我要去最新的 CSS Bootstrap 文件，但我显然忽略了 link 最新的 Bootstrap JS 文件！我包括那个和导航工程。我仍然需要稍微清理一下，但现在我至少可以看到它了！

感谢大家的帮助！

Bootstrap 导航栏未出现

Bootstrap navbar not appearing

navbar

twitter-bootstrap