如何修復這個可摺疊的bootstrap側邊欄菜單？

Question

下面的代碼工作正常，如果我有1個可摺疊的sidemenu項目，但是當我添加另一個上面的項目不工作的權利。這一切都非常突出。 底部的工作仍然很好。這裏有什麼問題謝謝。這裏是bootply： http://www.bootply.com/IABXgPMp5S

<div class="container body-content"> 
     <div class="row row-offcanvas row-offcanvas-left"> 
      <!-- sidebar --> 
      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> 
       <ul class="nav"> 
        <li> 
         <a href="#" data-toggle="collapse" data-target="#sub1">Sector One </a> 
         <ul class="nav collapse pull-right" id="sub1"> 
          <li><a href="#">List 1</a></li> 
          <li><a href="#">List 2</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#" data-toggle="collapse" data-target="#sub2">Sector Two</a> 
         <ul class="nav collapse pull-right" id="sub2"> 
          <li><a href="#">List 1</a></li> 
          <li><a href="#">List 2</a></li> 
         </ul> 
        </li> 
       </ul> 
     </div> 
    </div><!--/.row--> 
    </div><!--/.container--> 

和css文件：

body { 
    padding-top: 51px; 
} 
.text-center { 
    padding-top: 20px; 
} 
.col-xs-12 { 
    background-color: #fff; 
} 
#sidebar { 
    height: 100%; 
    padding-right: 0; 
    padding-top: 20px; 
} 

#sidebar .nav { 
    width: 95%; 
} 
#sidebar li { 
    border:0 #f2f2f2 solid; 
    border-bottom-width:1px; 
} 


/* collapsed sidebar styles */ 
@media screen and (max-width: 767px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all 0.25s ease-out; 
    -moz-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    } 
    .row-offcanvas-right 
    .sidebar-offcanvas { 
    right: -41.6%; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -41.6%; 
    } 
    .row-offcanvas-right.active { 
    right: 41.6%; 
    } 
    .row-offcanvas-left.active { 
    left: 41.6%; 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 41.6%; 
    } 
    #sidebar { 
    padding-top:0; 
    } 
} 

Answer 1

你是不是開始在第二個之前關閉第一「UL」，所以自舉認爲你有一個很大的無序列表。 here是修復一個鏈接，點擊這裏：

<div class="container body-content"> 
     <div class="row row-offcanvas row-offcanvas-left"> 
      <!-- sidebar --> 
      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> 
       <ul class="nav"> 
        <li> 
         <a href="#" data-toggle="collapse" data-target="#sub1">Sector One <span class="glyphicon glyphicon-arrow-down pull-right"></span></a> 
         <ul class="nav collapse pull-right" id="sub1"> 
          <li><a href="#">List 1</a></li> 
          <li><a href="#">List 2</a></li> 
         </ul> 
        </li> 
       </ul> 
       <ul class="nav"> 
        <li> 
         <a href="#" data-toggle="collapse" data-target="#sub2">Sector Two <span class="glyphicon glyphicon-arrow-down pull-right"></span></a> 
         <ul class="nav collapse pull-right" id="sub2"> 
          <li><a href="#">List 1</a></li> 
          <li><a href="#">List 2</a></li> 
         </ul> 
        </li> 
       </ul> 
     </div> 
    </div><!--/.row--> 
    </div><!--/.container--> 

是更正後的HTML