부트 스트랩 navbar가 데스크탑에서는 제대로 작동하지만 소형 장치에서는 작동하지 않습니다.

Question

부트 스트랩 navbar-default가 데스크톱에서 올바르게 작동합니다. 하지만 모바일 devive가 작동하지 않는 것을 확인하기 위해 크롬의 개발 도구를 사용할 때 배경이 아닌 지저분한 것입니다.

이것은 내 탐색 모음의 내 HTML 및 CSS입니다.

HTML 코드

<div data-affix="" data-fix-at-screen="top" data-clip-at-control="top" data-enable-lg="" data-enable-md="" data-enable-sm="" class="bd-affix-1 navbar navbar-default navbar-static-top"> 
<div class="container"> 

<div class="navbar-header"> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 

<div class="collapse navbar-collapse btnCollapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop<span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> 
       <div class="container"> 
        <div class="row"> 
         <ul class="col-sm-3"> 
          <li><a href="#"#">Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#">Link 1</a> 
          </li> 
          <li><a href="#"#">Link 1</a> 
          </li>        
         </ul> 
         <ul class="col-sm-3"> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li>        
         </ul> 
         <ul class="col-sm-3"> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li>        
         </ul> 
         <ul class="col-sm-3"> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li> 
          <li><a href="#"#"> Link 1</a> 
          </li>        
         </ul> 
        </div> 
       </div> 

     </li> 
     </ul> 
    </li> 
    <li><a href="#">Desti</a></li> 
    <li><a href="#">Deals</a></li> 
    </ul> 
</div> 

</div> 
<!-- end container --> 
</div> 

CSS 코드

 th { 
      color:#D5DDE5;; 
      background:#1b1e24; 
      font-weight: 100; 
      text-align: center; 
     } 

     tr { 
      color:#666B85; 
      font-size:16px; 
      font-weight:normal; 
      text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); 
     } 

     td { 
      padding:20px; 
      text-align:center; 
      vertical-align:middle; 
      font-weight:600; 
      font-size:12px; 
      text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); 
     } 
     #menu-container { 
      float: left; 
      display: block; 
      width: 150px; 
     } 

     .nav > li.dropdown.open { 
      position: static; 
     } 

     .nav > li.dropdown.open .dropdown-menu { 
      display: table; 
      border-radius: 0px; 
      width: 100%; 
      text-align: center; 
      left: 0; 
      right: 0; 
     } 

     .dropdown-menu > li { 
      display: table-cell; 
      height: 50px; 
      line-height: 50px; 
      vertical-align: middle; 
     } 

     @media screen and (max-width: 767px) { 
      .dropdown-menu > li { 
      display: block; 
      } 
     } 
     .navbar-default{ 
      background-color: #933e6e; 
      padding-bottom: 10px; 
      padding-top: 10px; 
      margin: 0; 
      height: 60px; 
     } 
     .navbar-nav{ 
      width: 100%; 
      color: #000; 
     } 

     .nav > li { 
      position: relative; 
      display: block; 
      width: 12.5%; 
     } 
     .navbar-default .navbar-nav > li > a{ 
      color: #000; 
      padding-bottom: 10px; 
      padding-top: 10px; 
      font-weight: normal; 
      text-transform: uppercase; 
      margin-right: 10px; 
      margin-left: 10px; 
      border-radius: 0px; 
      display: block; 
      white-space: nowrap; 
      text-align: center; 
     } 
     .navbar-default .navbar-nav > li > a:hover{ 
      color: #dddddd; 
      padding-bottom: 10px; 
      padding-top: 10px; 
      font-weight: normal; 
      text-transform: uppercase; 
      margin-right: 10px; 
      margin-left: 10px; 
      border-radius: 0px; 
      display: block; 
      white-space: nowrap; 
      border-bottom: 2px solid #fff; 
      text-align: center; 
     } 

     .affix{ 
      width: 100%; 
      right: 0%; 
      left: auto; 
      top: 0px; 
      bottom: auto; 
      position: fixed; 
     } 
     .nav .navbar-li{ 
      margin-right: 20%; 
     } 

     .container .row li{ 
      list-style-type: none; 
      text-align: left; 
      font-size: 16px; 
     } 
     .container .row a:hover{ 
      color: #333; 
      text-decoration: none; 
     } 

JS 코드는

$('#menu-container li').hover(function() { 
    //show its submenu 
    $('ul', this).fadeIn(100); 

}, function() { 
    //hide its submenu 
    $('div ul', this).fadeOut(100); 
}); 

이미 배경을 배치하려고하지만 난 아래에있는 검색 상자를 가지고 바보 같은 생각이었다. 내가 메뉴

어떤 제안을 클릭 할 때 지금의 모습 그게 전부?

http://jsfiddle.net/DopeAt/r4vL6v1e/

Answer 1

ProgrammerV5 나를 클래스 네비게이션 바는 없을 것을 확인하는 데 도움이. 그래서 당신은 제거하고 항목을 기본 적용 및 제거 경우 (즉, 행동을 받고 그 이유는하는 부트 스트랩 클래스의 일부를 교체하는로 변경하고

<div class="collapse navbar-collapse btnCollapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li> 

<div class="btnCollapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li>