Question

HTML
<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
         <a href="#top">Top</a>
         <a href="#middle">Middle</a>
         <a href="#bottom">Bottom</a>

        <ul id="navigation_bar">
            <li id="top"><a href="top"></a>Top</li>
            <li id="middle"><a href="middle"></a>Middle</li>
            <li id="bottom"><a href="bottom"></a>Bottom</li>
    </nav>
</div>

CSS
#top, #middle, #bottom {
height: 600px;
width: 200px;
background: green; 
text-decoration: none;
}

body {
padding-top: 70px;
}

我添加了此链接提供的“修复顶部”HTML代码：https://getbootstrap.com/components/#navbar

有人可以告诉我为什么我的导航栏在我这样做后停止运作了吗？

谢谢

Answer 1

在深入研究之后，您的HTML并没有多大意义。

我看到它的方式是：

<ul id="navigation_bar">
    <li id="top"><a href="top"></a>Top</li> // <-- <a> tag with a meaningless href and no innerText
    <li id="middle"><a href="middle"></a>Middle</li>
    <li id="bottom"><a href="bottom"></a>Bottom</li>
</ul>

我唯一的猜测是您尝试将上述代码用作内容部分？

在这种情况下，您需要将关闭</nav>标记移到该代码上方，如下所示：

<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
      <a href="#top">Top</a>
      <a href="#middle">Middle</a>
      <a href="#bottom">Bottom</a>
    </nav>

    <ul id="navigation_bar">
      <li id="top"><a href="#top"></a>Top</li>
      <li id="middle"><a href="#middle"></a>Middle</li>
      <li id="bottom"><a href="#bottom"></a>Bottom</li>
    </ul>
</div>

Answer 2

您的代码有点混乱，不确定为什么有两组链接。我通常使用http://getbootstrap.com/examples/starter-template/而不是https://getbootstrap.com/components/#navbar的导航。我相信更详细的代码也是一样的，省略号在你的链接上。以下是基于我链接中的模板使用大部分代码的导航。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
    #top, #middle, #bottom {
    height: 600px;
    width: 200px;
    background: green;
    text-decoration: none;
    }
    body {
    padding-top: 70px;
    }
    </style>
  </head>
  <body>
<nav class="navbar navbar-default navbar-fixed-top">
  <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>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li id="top" class="active"><a href="top">Top</a></li>
        <li id="middle"><a href="middle">Middle</a></li>
        <li id="bottom"><a href="bottom">Bottom</a></li>
      </ul>
    </div>
  </div>
</nav>



  </body>
</html>

当我切换到Bootstrap时，为什么我的导航栏停止工作？

2 个答案: