Question

我正在查看此代码，我无法弄清楚问题是什么。当我缩小浏览器以测试我的导航栏崩溃时，只有在按下按钮后才能获得链接，我的导航栏保持完全相同的高度！导航栏下面会出现一条小线，就是这样！任何帮助都将非常感激！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav>
  <div class="navbar navbar-inverse " role="navigation" id="navigacija">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">GsC</a>
        <button class="navbar-toggle" data-toggle="collapse" data- target="#navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse " id="navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right list-inline" id="linkovi">
          <li><a href="index.html" id="homegl"><span class="glyphicon glyphicon-home">   
    </span></a> 
          </li>
          <li><a href="contact.html">CONTACT</a> 
          </li>
          <li><a href="ourteam.html">OUR TEAM</a>
          </li>
          <li><a href="about.html">ABOUT</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 1

我认为这是因为按钮上的拼写错误。它看起来像：

<button class="navbar-toggle" data-toggle="collapse" data -target="#navHeaderCollapse">

但它应该看起来像

<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">

data- target中有不需要的空格。如果你删除它应该工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav>
  <div class="navbar navbar-inverse " role="navigation" id="navigacija">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">GsC</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse " id="navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right list-inline" id="linkovi">
          <li><a href="index.html" id="homegl"><span class="glyphicon glyphicon-home">   
    </span></a> 
          </li>
          <li><a href="contact.html">CONTACT</a> 
          </li>
          <li><a href="ourteam.html">OUR TEAM</a>
          </li>
          <li><a href="about.html">ABOUT</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Navbar不会崩溃

1 个答案: