css - 折叠时 Bootstrap 堆叠导航宽度问题

Question

当元素切换为折叠时，它们会在 col-sm-2 类中并排折叠。单击“挑战管理”以查看它在做什么。

我希望“挑战管理”要么占用 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>