Navbar中不包含Bootstrap下拉菜单

Question

我不认为任何CSS都会改变这个，所以我只会发布HTML。

反正我的导航栏元素'关于'有一个停止工作的下拉菜单。我无法弄清楚，所以我重新编写了代码，直到它修复。但它只是修复了一下。

本质上，当我的导航栏折叠时，About元素仍然被包含，但是当它被点击并显示其内容时，它基本上会在下拉框外创建一个新框架。它过去只是放大折叠菜单以显示下拉菜单的所有元素。我无法弄清楚如何解决它。

<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand"> 
      <img id="logo" src="images/logoSM.png" alt="Limit Magazine"> 
     </a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown" data-toggle="dropdown"><a href="#" ><div>About<span class="caret"></span></div></a></li> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="story.html">Our Story</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Blog</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Tumblr</a></li> 
       </ul> 
      <li><a href="#"><div class="navsub btn-nav pull-left">Subscribe</div></a></li> 
     </ul> 

    </div> 
</nav> 

下面是它看起来像什么。

Answer 1

修改后的代码如下。 <li>应该包含您的下拉按钮/药丸/等等，然后在下拉<li>关闭之前，应该有下拉菜单中的完整<ul>。我错过了一些东西。

<li class="dropdown" > 
       <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#" ><div>About<span class="caret"></span></div></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="story.html">Our Story</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Blog</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Tumblr</a></li> 
       </ul> 
      </li>