Question

我有以下nav代码（见下文）并且它无效。

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

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

我还在为navbar元素添加一些样式。以下是相关CSS以防可能是某种原因的罪魁祸首。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

思想？

谢谢！

Answer 1

计算出来!!!

当我要使用最新的CSS Bootstrap文件时，我显然忽略了链接到最新的Bootstrap JS文件！我包括那个和导航工程。我仍然需要清理一下，但现在我至少可以看到它！

感谢大家的帮助！

Answer 2

以下是来自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 3

你没有说你正在使用哪个版本的Bootstrap，我想3.x.但是你的代码并不适合Bootstrap的标准。我认为切换导航的icon-bar必须位于导航栏标题中。我也不知道（也许你可以）你是否可以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>

Bootstrap导航栏没有出现

3 个答案: