html - Bootstrap 3 下拉菜单不起作用

Question

我的下拉菜单有点问题。我无法让它工作。我已经搜索了几个小时，但仍然一无所获。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-center">
        <li> <a href="#page-top" class="hidden-xs page-scroll" id="logowts" style="display:none;"><img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /></a> </li>
        <li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span>
          <ul class="dropdown-menu">
            <li><a href="">O TARGACH</a></li>
            <li><a href="">SALONY</a></li>
            <li><a href=""></a>DOJAZD</li>
            <li><a href=""></a>DLA MEDIÓW</li>
          </ul>
        </li>
        <li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li>
        <li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li>
        <li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li>
        <li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li>
        <li> <a class="page-scroll" href="#salony">SALONY</a> </li>
        <li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li>
        <li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li>
        <li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li>
        <li> <a href="media.html" target="_blank">DLA MEDIÓW</a> </li>
       
        <li> <a class="page-scroll" href="#contact">KONTAKT</a> </li>
        <li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li>
      </ul>
    </div>

CodePen

Answer 1

<span class="caret"></span>必须在下拉列表中 <a>...</a>标签。
改变

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span>

到

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a>  

引导
http://www.bootply.com/wS18cO4pfA