부트 스트랩 탐색 토글

Question

표준 부트 스트랩 헤더 (로고 및 드롭 다운 섹션 포함)와 탐색 용 사이드 바가있는 웹 페이지가 있습니다. 화면 크기가 작을 때 사이드 바를 축소하려고합니다. 이를 위해, 토글 버튼을 만들어 메뉴를 무너 뜨립니다. 그러나 문제는 축소 가능한 메뉴가 닫힌 경우에도 일부 내용이 모든 항목 위에 표시되는 것입니다. 다음은 제가 의미하는 바를 보여주는 스크린 샷입니다.

보라색 상자는 메뉴가 닫힌 경우에도 그 내용이 어떻게 든 다른 요소 위에 표시된다는 것을 보여줍니다. 수정 사항이 있습니까? 다음은 코드입니다 :

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a href="#side" class="btn btn-default btn-primary pull-left navbar-toggle" data-toggle="collapse"><span class="caret"></span></a> 
      <a class="navbar-brand pull-right" href="#">Company Logo</a> 
     </div> 
     <ul id="side" class="nav navbar-nav collapse visible-xs"> 
      <li><a href="#">Home</a></li> 
      <li><a href="stuff.html">Stuff</a></li> 
      <li><a href="list.html">List Example</a></li> 
      <li><a href="#">Contacts</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Profile</a></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </nav> 

Answer 1

봅니다 네비게이션 바에 헤더

<div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

이를 추가하고 거기에서 너무 눈에 보이는-XS를 제거합니다.