摺疊時引導堆疊導航寬度問題

Question

當項目切換爲摺疊時，它們將在col-sm-2類中並排摺疊。點擊「挑戰管理」，看看它在做什麼。

我希望「挑戰管理」要麼佔用100％的container要麼始終正確堆疊。

有什麼想法？我錯過了一些簡單的東西。

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>