Question

我正在使用Bootstrap sb-admin v2模板。我正在使用侧导杆。我似乎遇到了与其他人相反的问题......在桌面监视器上查看页面时，如果我扩展了

项目的下拉菜单或添加了足够的顶级

< li>项目使得内容超出视口的高度，它们被切断并且不会滚动。当我调整窗口大小或查看任何移动设备上的页面时，菜单会按预期折叠，我可以滚动导航

项目。我已经尝试了很多东西使用overflow-y：auto，scroll等...在所有相关的css类上，似乎没有任何工作。我尝试了javascript修复，但这打破了移动功能。它完全直接来自版本3.3的bootstrap.min.css文件，我不知道如何解决这个问题。有什么建议吗？

＆＃13;

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="sideMenu" class="nav navbar-nav side-nav">
    <li><a id="menuItem" href="javascript:;" data-toggle="collapse" data-target="#NewsItems"><i class="fa fa-fw fa-newspaper-o"></i> News Items <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="NewsItems" class="collapse">
        <li><a runat="server" href="/admin/modules/news-items/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/news-items/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=NewsItem">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=NewsItem">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Photos"><i class="fa fa-fw fa-camera"></i> Photos <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Photos" class="collapse">
        <li><a runat="server" href="/admin/modules/photos/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/photos/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Photo">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Photo">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Blogs"><i class="fa fa-fw fa-rss"></i> Blogs <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Blogs" class="collapse">
        <li><a runat="server" href="/admin/modules/blogs/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/blogs/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Blog">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Blog">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Albums"><i class="fa fa-fw fa-photo"></i> Albums <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Albums" class="collapse">
        <li><a runat="server" href="/admin/modules/albums/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/albums/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Audio"><i class="fa fa-fw fa-music"></i> Audio <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Audio" class="collapse">
        <li><a runat="server" href="/admin/modules/audio/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/audio/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Events"><i class="fa fa-fw fa-calendar-o"></i> Events <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Events" class="collapse">
        <li><a runat="server" href="/admin/modules/events/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/events/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Event">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Event">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#MenuItems"><i class="fa fa-fw fa-navicon"></i> Menu Items <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="MenuItems" class="collapse">
        <li><a runat="server" href="/admin/modules/menu-items/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/menu-items/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Pages"><i class="fa fa-fw fa-file-o"></i> Pages <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Pages" class="collapse">
        <li><a runat="server" href="/admin/modules/pages/view.aspx">Manage</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Roles"><i class="fa fa-fw fa-users"></i> Roles <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Roles" class="collapse">
        <li><a runat="server" href="/admin/modules/roles/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/roles/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Users"><i class="fa fa-fw fa-user"></i> Users <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Users" class="collapse">
        <li><a runat="server" href="/admin/modules/users/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/users/add.aspx">Add</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

我一直在努力解决这个问题......在发布这个问题后几分钟我找到了答案......

我需要做的就是增加高度：100％;到sb-admin.css文件中的side-nav div，如下所示：

@media(min-width:768px) {
  .side-nav {
    position: fixed;
    top: 51px;
    left: 225px;
    width: 225px;
    margin-left: -225px;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    background-color: #222;
    height: 100%;
  }

具有许多项目的Bootstrap 3 side-nav赢得了不能在整页视图中滚动

1 个答案: