내비게이션 막대가 작은 화면에서 정렬을 잃습니다.

내 사이트에서 트위터 부트 스트랩을 구현했습니다. twitter bootstrap official site과 같은 반응 형 탐색 막대를 만드는 방법을 알고 싶습니다. 작은 크기의 화면에서 정렬에 문제가 있습니다. 아래 사진을보십시오.내비게이션 막대가 작은 화면에서 정렬을 잃습니다.

HTML 코드 :

<div class="navbar-wrapper"> 
     <div class="container"> 

     <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.php">Studyfoyer</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="learn.php">Learn</a></li> 
       <li><a href="teach.php">Teach</a></li> 
       <li><a href="forum.php">Discuss</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 

        <li><a href="contact.php">Contact Us</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contribute</a></li> 

        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div>

커스텀 CSS :

.nav{ 
    float:right; 
} 
/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
.navbar-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 20; 
} 

/* Flip around the padding for proper display in narrow viewports */ 
.navbar-wrapper .container { 
    padding-left: 0; 
    padding-right: 0; 
} 
.navbar-wrapper .navbar { 
    padding-left: 15px; 
    padding-right: 15px; 
}

은 참고 크기