为什么我的下拉导航栏无法显示

Question

我有一个左边的260px宽，右边是260px宽。我的中心div是流畅的100%宽度。

点击右箭头，我想要一个与中心div容器宽度相同的dropdown。下面是我的代码和fiddle，但似乎下拉列表根本不起作用。

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">    
   <div class="row">
    <div class="leftBox pull-left" href="#">

    </div>
    <div class="rightBox pull-right" href="#">
      Right Div
    </div>
     <div class="nav-collapse collapse">
        <ul class="nav">
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
             <ul class="dropdown-menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Something else here</a></li>
               <li class="divider"></li>
               <li class="nav-header">Nav header</li>
               <li><a href="#">Separated link</a></li>
               <li><a href="#">One more separated link</a></li>
             </ul>
          </li>
        </ul>
       </div>
    </div>
  </div>
 </div>

http://codepen.io/anon/pen/vBjwC

Answer 1

下拉列表正在运行，但您正在使用collapse类，因此它已处于折叠状态..

和： 在js中添加：

function fun(){
  document.getElementsByClassName('nav-collapse')[0].classList.remove('collapse');
}

这在css中：

.nav-collapse{width:60%; float:left;}

确实有用。试试吧。