折叠时引导堆叠导航宽度问题答案

【问题标题】：Bootstrap stacked nav width issue when collapsing折叠时引导堆叠导航宽度问题
【发布时间】：2016-09-03 08:46:54
【问题描述】：

当项目切换为折叠时，它们在col-sm-2 类中并排折叠。点击“挑战管理”看看它在做什么。

我希望“挑战管理”占用 100% 的 container 或始终正确堆叠。

有什么想法吗？我错过了一些简单的东西。

<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>

【问题讨论】：

标签： css twitter-bootstrap nav

【解决方案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>

【讨论】：

我将此归咎于周五晚些时候的脑痉挛。是的，我正在寻找
做了什么......但出于某种原因，我认为我“不得不”在 CSS 中做错了什么。感谢您的宝贵时间。