Question

我正在构建一个具有大量分层导航的页面，并且老板希望可以从每个页面访问整个导航路径，无论是在工作站还是移动设备上查看。我想出了如何构建适用于每种设备类型的菜单，但我无法弄清楚如何动态切换它们。

我正在试图弄清楚如何更改这样的下拉菜单，

<ul class="nav navbar-nav navbar-center">
 <li>
  <a class="dropdown-toggle" data-toggle="dropdown">MainHeader</a>
  <ul class="dropdown-menu multi-level">
   <li class="dropdown-submenu">
    <a class="dropdown-toggle" data-toggle="dropdown">SubHeader</a>
    <ul class="dropdown-menu">
     <li><a href="#">ListItem</a></li>

到像这样的折叠菜单，

<ul class="nav navbar-nav navbar-center">
 <div class="panel-group">
  <div class="panel panel-default">
   <div class="panel-heading">
    <a data-toggle="collapse" href="#collapse1">MainHeader</a>
   </div>
   <div id="collapse1" class="panel-collapse collapse">
    <ul class="list-group">
     <li class="list-group-item">
      <div class="panel-heading">
       <a data-toggle="collapse" href="#collapse1a">SubHeader</a>
      </div>
      <div id="collapse1a" class="panel-collapse collapse">
       <ul class="list-group">
        <li class="list-group-item"><a href="#">ListItem</a></li>

每当自举导航栏折叠时。

P.S。这是我关于Stack Overflow的第一个问题，我是CSS和Bootstrap的新手，所以我确定为了清晰起见，我必须编辑这个问题。我提前为我造成的任何困惑道歉。

Answer 1

这可能不是最好的解决方案，但我发现css媒体查询可以让我在相同的视口宽度触发我想要的行为，因为bootstrap用来触发菜单崩溃。

@media (min-width: 768px) {
    #navbar-menu-collapse {
         display: none;
    }
}

@media (max-width: 767px) {
    #navbar-menu-dropdown {
         display: none;
    }
}

我制作了一个代码表示例，其行为方式符合我的要求，但如果有人知道更好的解决方案，我仍然会非常感兴趣！

http://codepen.io/LordGriffon/pen/peyRjZ

当导航栏折叠时，如何使Bootstrap 3导航栏从下拉列表更改为折叠？

1 个答案: