Question

我正在尝试更改我的代码，以便移动和平板电脑的导航崩溃，但我似乎无法让它工作。我尝试将@ grid-float-breakpoint更改为992px，但这似乎不起作用。关于我可能出错的地方的任何想法？

我简化了HTML，因为它太多了但我觉得你会明白这个想法。

<div id="main-nav" class="row">
                <div class="header-wrap">
        <div class="site-branding">
                            <p class="site-title"><a href="#" rel="home">SITE TITLE</a></p>
                    </div><!-- .site-branding -->
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            <ul id="primary-menu" class="menu">
       <li class="menu-item menu-item-has-children dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li class="menu-item"><a href="#">Sub Link</a></li>
          <li class="menu-item"><a href="#">Sublink</a></li>
        </ul>
      </li>
     </ul>
  </nav>
  </div>
</div>

SCSS

.nav-menu {
  display: none;
  position: relative;
  top: 70px;
}
.dropdown-menu {
  display: none;
  position: static;
  width: 100%;
  li {
    width: 100%;
  }
}

.main-navigation.toggled {
  .nav-menu {
    width: 100%;
    display: block;
    background-color: #363636;
    li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
    li > a {
      padding: 8px;
      pointer-events: none; // prevent it's immediate A child to follow HREF
      cursor: default;
    }
    a {color: #fff;}
    .dropdown-menu {
      position:static;
      top: 80px;
      display: none;
      background: none;
      box-shadow: none;
      padding: 0;
      a {
        color: #fff;
        pointer-events: auto;
        cursor: pointer;
      }
      li {
        background-color: #000;
        a {
          width: 100%;
          &:hover {
            color: #000;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  #masthead:hover {
      padding-top:29px;
      background-color:$site-dark-gray;
      -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
      -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
      box-shadow:0 0 8px rgba(0, 0, 0, 0.7);
      height:100px;
      .site-branding{
        width:240px;
        height:49px;
        @media (max-width: $screen-sm-max) {
          width:210px;
        }
        .site-title{
          a{
            width:167px;
            height:49px;
          }
        }
      }
      @media (max-width: $screen-xs-max) {
        padding-top:29px;
        height:100px;
      }
  }
  .main-navigation {
      .nav-menu {
        top: 0;
      }
        .dropdown-menu {
            visibility: hidden;
            display: block;
            opacity: 0;
            border-radius: 0;
            top: 3.15em;
            background-color: $site-dark-gray;
            // transform: translateY(-20px);
            transform: translateY(20px);
            transition: all .3s ease;
            left: -1.5em !important;
            overflow: hidden;
            padding: 0;
            border: 0;
        li:first-child {display: none !important;}
            li {
                margin: 0 !important;
                transition: all .3s ease;
                a {
                    padding-top: 8px;
                padding-bottom: 8px;
                }
                &:hover a {
                    color: #000 !important;
                    background-color: #fff;
                }
            }
            .active > a {
                    background-color: #fff;
                    color: #000 !important;
            }
        }

        .dropdown:hover .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
        }
        .dropdown:after {
            content: "";
            display: block;
            height: 2em;
        position: absolute;
        top: 1em;
        width: 100%;
    }
  }
}

Answer 1

我认为这可能是因为您错过了导航切换按钮中的data-toggle="collapse"和data-target="#primary-menu"属性，因为这是告诉菜单的内容或不是它应该是活跃的。在example on Bootstrap's website中查看他们拥有它的方式。

Answer 2

最佳解决方案是更改scss 变量 @ grid-float-breakpoint

$grid-float-breakpoint: $screen-md-min !default;

平板电脑的Bootstrap手机菜单？

2 个答案: