부트 스트랩 3 첫 번째 행을 넘는 네비게이션

나는이 정확한 문제를 찾을 수 없으므로이 질문이 중복되지 않기를 바랍니다.부트 스트랩 3 첫 번째 행을 넘는 네비게이션

먼저 여기 읽기에서 부트 스트랩 3.

의 시간 사용자와 나는 네비게이션 바 같은 자신의 용기를한다고 생각 부트 스트랩 문서 :

는

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
       <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.html">My Site</a> 
     </div> 
     <div class="collapse navbar-collapse" id="navbarCollapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
       <li><a href="/services.html"><span class="glyphicon glyphicon-list-alt"></span> Services</a></li> 
       <li><a href="/about-us.html"><span class="glyphicon glyphicon-info-sign"></span> About</a></li> 
       <li><a href="/contact-us.html"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<div class="container"> 
     <div class="row">content goes here and this content is under the navbar</div> 
</div>

페이지의 본문은 그것의 자신의 컨테이너. 그 맞습니까?

나는 행을 추가했지만 첫 번째 행 내용은 탐색 바 아래에 있습니다.

첫 번째 행에 추가해야하는 클래스와 같은 것을 놓친 적이 있습니까?

나는 대답이 navbar가 "navbar-fixed-top"을 가지고 있는지 확인하는 것과 비슷한 질문을 발견했다. 그러나 나는 이미 그것을 가지고있다.

출처

2016-09-26 Ken

설명서를주의 깊게 읽으십시오. Bootstrap navbar docs에 따르면

당신이 body의 상단에 padding를 추가하지 않는 고정 메뉴 바는, 다른 컨텐츠를 오버레이합니다. 자신의 가치를 시험해 보거나 아래에있는 스 니펫을 사용하십시오. 도움말 : 기본적으로 Navbar는 50px 높이입니다.

body { 
    padding-top: 70px; // Your navbar height 
}

하는 핵심 부트 스트랩 CSS 후이를 포함해야합니다.

출처

2016-09-26 10:33:14 makshh

감사합니다. 나는 의견에서 그것을 놓쳤습니다. – Ken

난 당신이 메뉴 바 아래의 내용은 단지

navbar-fixed

대신

이

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-  
fixed"role="navigation">

같은

navbar-fixed-top

쓰기 원하는 것을 정확하게 문제를 이해한다면 그것은 이 볼 작동합니다 바이올린 fiddle

당신이 찾고 있습니까?

출처

2016-09-26 10:49:31

는 내 문제를 어느 정도 해결하지만 화면에 머물러있는 navbar를 원합니다. makshh의 회신에서 navbar-fixed-top을 사용하려면 직접 내 패딩을 추가해야합니다. – Ken

부트 스트랩 3 첫 번째 행을 넘는 네비게이션

답변

관련 문제