折りたたみ時のブートストラップ積み重ねの幅の問題

Question

アイテムが折りたたまれた状態でトグルされると、col-sm-2クラスに並んで折りたたまれます。それが何をしているのかを見るために「チャレンジマネジメント」をクリックしてください。

チャレンジマネジメントをcontainerの100％にするか、常に適切にスタックするようにします。

どのような考えですか？私は何か簡単なものを欠いている。

https://jsfiddle.net/egfs8t61/

<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;"> 
    <a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed"> 
    <strong> Challenge Management </strong> 
    <i class="glyphicon glyphicon-chevron-down"></i> 
    </a> 
    <ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;"> 
    <li class="ui-sortable-handle" id="li_86"> 
     <a href="#" onclick="changeIframe('/challenge/entry', '')"> 
     <i class="glyphicon "></i> New Entry 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_87"> 
     <a href="#" onclick="changeIframe('/challenge/list', '')"> 
     <i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span> 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_88"> 
     <a href="#" onclick="changeIframe('/challenge/history', '')"> 
     <i class="glyphicon "></i> My Entries 
     </a> 
    </li> 
    </ul> 
    <a href="#" data-toggle="collapse" aria-expanded="true" data-target="#menu_Fabrication" class=""> 
    <strong> Fabrication </strong> 
    <i class="glyphicon glyphicon-chevron-right"></i> 
    </a> 
    <ul class="nav nav-stacked ui-sortable collapse in" id="menu_Fabrication" aria-expanded="true"> 
    <li class="ui-sortable-handle" id="li_79"> 
     <a href="#" onclick="changeIframe('/fms/index', '')"> 
     <i class="glyphicon "></i> Fab Management (FMS) 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_80"> 
     <a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&amp;Page=1')"> 
     <i class="glyphicon "></i> Department Status 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_85"> 
     <a href="#" onclick="changeIframe('/schedule/taktmgr', '')"> 
     <i class="glyphicon "></i> Takt Manager 
     </a> 
    </li> 
    </ul> 
</div> 

Answer 1

私は完全にあなたの質問を理解していませんでした。しかし、これはあなたが探しているものですか？

Fiddle here

<div class="col-sm-2" style="position:fixed;right: 0;left: 0;z-index: 1030; max-height:100%; overflow-y:auto; margin-top:-67px;padding-top:67px;"> 
    <a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_ChallengeManagement" class="collapsed"> 
    <strong> Challenge Management </strong> 
    <i class="glyphicon glyphicon-chevron-down"></i> 
    </a> 
    <ul class="nav nav-stacked ui-sortable collapse" id="menu_ChallengeManagement" aria-expanded="false" style="height: 0px;"> 
    <li class="ui-sortable-handle" id="li_86"> 
     <a href="#" onclick="changeIframe('/challenge/entry', '')"> 
     <i class="glyphicon "></i> New Entry 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_87"> 
     <a href="#" onclick="changeIframe('/challenge/list', '')"> 
     <i class="glyphicon "></i> My Tasks <span class="badge badge-info MyTaskscount"></span> 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_88"> 
     <a href="#" onclick="changeIframe('/challenge/history', '')"> 
     <i class="glyphicon "></i> My Entries 
     </a> 
    </li> 
    </ul> 
    <br> 
    <a href="#" data-toggle="collapse" aria-expanded="false" data-target="#menu_Fabrication" class="collapsed"> 
    <strong> Fabrication </strong> 
    <i class="glyphicon glyphicon-chevron-right"></i> 
    </a> 
    <ul class="nav nav-stacked ui-sortable collapse" id="menu_Fabrication" aria-expanded="true"> 
    <li class="ui-sortable-handle" id="li_86"> 
     <a href="#" onclick="changeIframe('/fms/index', '')"> 
     <i class="glyphicon "></i> Fab Management (FMS) 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_87"> 
     <a href="#" onclick="changeIframe('/que/departmentstatus', 'Org=&amp;Page=1')"> 
     <i class="glyphicon "></i> Department Status 
     </a> 
    </li> 
    <li class="ui-sortable-handle" id="li_88"> 
     <a href="#" onclick="changeIframe('/schedule/taktmgr', '')"> 
     <i class="glyphicon "></i> Takt Manager 
     </a> 
    </li> 
    </ul> 
</div>