Tablet의 부트 스트랩 모바일 메뉴?

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 난 당신이 data-toggle="collapse" 및 네비게이션 토글 버튼에서 data-target="#primary-menu" 속성 누락하고 있기 때문에 그 메뉴를 알려줍니다 무엇 이후이 될 수있다 생각하고

.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

그것을해야하는지 여부 활동적으로. 그들이 example on Bootstrap's website에서 가지고있는 방법을 확인하십시오.

Answer 2

가장 좋은 방법은 변화하는 SCS들에게

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