부트 스트랩 축소 메뉴가 메뉴 위에 나타납니다.

부트 스트랩으로 웹 사이트를 만들고 있습니다. 나는이 코드를 만들었다.부트 스트랩 축소 메뉴가 메뉴 위에 나타납니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Krishna Driver Services</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="webstyle.css"> 


    </head> 
    <body> 
    <div class="navbar navbar-default">  

     <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 href="" class="navbar-brand"> 
      <img src="images\logo.png"> 
      </a> 

     </div> 
     <div class="collapse navbar-collapse navbar-right"> 

      <ul class="nav navbar-nav"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Services</a></li> 
      <li><a href="">Contact Us</a></li> 
      </ul> 

     </div> 


     </div> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

&이 CSS를 내 붕괴 메뉴 바로 로고 위에 표시되는 코드

.navbar-default{ 
    min-height:160px; 
}

. 나는 그것이 navbar 폭의 변화 때문에 일어나고 있다고 생각한다.

출처

2015-01-07 Brijesh Maurya

UPDATE

그래서 여기 진짜 대답, 나는 질문의 요점을 놓친 코멘트에 나에게 분명히하고있다 : 당신은 확인해야

는, 그뿐만 아니라 navbar뿐만 아니라 navbar-header 변경 높이. 이 작업을 수행하는 가장 확실한 방법은이 바이올린을 살펴보세요

.navbar-default, .navbar-default .navbar-header{ 
    min-height:160px; 
}

에 CSS를 변경하는 것입니다 : 나는 다른, 더 우아한 해결책이 있습니다 확신 http://jsfiddle.net/cr2frn1p/6/

을하고 난했습니다 확신 그 중 하나를 오래 전에 프로젝트에서 사용했지만 현재는 검색 할 시간이 없습니다. 관심이 있으시면 내일 여기에 포함시킬 수 있습니다.

ORIGINAL POST

나에게 잘 보이는 :

http://jsfiddle.net/cr2frn1p/는 여기에 몇 가지 추측을하는 : 당신은 로고와 버튼의 위쪽 가장자리가 완벽하게 정렬되지 않습니다, 사실에 참조 될 수 있습니다.

이

.navbar-toggle { 
    margin-top: 15px; 
}

출처

2015-01-07 15:58:35 mmgross

jQuery를 버전을로드하지 않습니다 바이올린이 없으며 포함 않습니다 즉 .navbar - 토글 8px의 여유가있는 동안 .navbar 브랜드가 15 픽셀의 패딩을 가지고 있기 때문에, 당신의 CSS이 추가입니다 부트 스트랩을위한 .js 라이브러리. 이와 같이 완전히 기능하지는 않으며,이 대답은 묻는 사람이 갖는 문제를 해결하지 못합니다. 제대로로드하면 그들이 무슨 말을하는지 알 수 있습니다. – MattD

jquery-1.11로 테스트 : http://jsfiddle.net/cr2frn1p/4/ 및 jquery-2.1 : http://jsfiddle.net/cr2frn1p/5/ 잘못된 것을 찾을 수 없습니다. – mmgross

결과보기 축소 그래서 그것은 모바일 토글 버튼을 시작한 후 버튼을 클릭하십시오 .... – MattD

부트 스트랩 축소 메뉴가 메뉴 위에 나타납니다.

답변

관련 문제