Question

我正在使用bootstrap 3，我有一个使用此代码的导航。

   <div class="navbar navbar-default navbar-fixed-top">
  <style>
    body {
        padding-top: 120px;
    }
  </style>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

<div class="animbrand"><a class="navbar-brand" href="index">Home</a></div>

    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="portfolio"><span class="glyphicon glyphicon-th-large"></span> Portfolio</a>

        </li>

        <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a>

        </li>

    <li><a href="#"><span class="glyphicon glyphicon-file"></span> Blog</a>

        </li>

    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a>

        </li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
        <ul class="dropdown-menu">
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

          <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Profile</a></li>

         </ul>
        </li>

       <li><a href="#"><span class="glyphicon glyphicon-arrow-up"></span></a>

       </li>

       </ul>
    </div>
  </div>
</div>

问题不在于代码，而在于会发生什么。如果我按下Glyphicon上去（向上箭头，URL变为索引＃）它将带我到页面，没有问题但是我不能点击下拉，直到我回到我的/索引页面。

http://i62.tinypic.com/1iyh38.png

http://i58.tinypic.com/2pqw9cm.png

Answer 1

那是因为你需要一个id为'＃'的元素，因为当你点击链接上去时，它会转到一个名为index＃的页面。因此，解决此问题的方法是将所有内容放在div中，其ID为＃，以便在您单击a属性时引用。或者您可以将向上按钮更改回索引以重新加载页面。

并且您的所有a标记都没有，只能返回页面。

Bootstrap 3，下拉问题

1 个答案: