두 번째 navbar를 첫 번째 navbar 아래에 놓습니다.

Question

Bootstrap을 사용하여 내 페이지 상단에 내비게이션 막대를 만듭니다.

내 목표는 높이가 더 작고 원래 탐색 표시 줄 아래로 이동하며 상단에 고정되어 사용자가 스크롤 할 때 두 탐색 막대가 함께 스크롤하도록 두 번째 탐색 막대를 만드는 것입니다.

나는 this 바라 보았다, 그리고 margin-top:43px;를 추가하면 원래의 네비게이션 바 아래에있는 2 네비게이션 바 밀어 않지만, 내 body-content 자동 .. 대신 2 네비게이션 바 그냥 내 몸 내용의 웃옷을 인하 조정하지 않습니다.

난 그냥 2 네비게이션 바과 함께, 그래서 여기에 내 원래의 네비게이션 바의 HTML을 이렇게 시작하고있다 :

---

HTML : 여기

<nav class="navbar navbar-fixed-top navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" 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> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 


<nav class="navbar navbar-fixed-top navbar-inverse" style="margin-top:50px"></nav> 

<div class="container body-content"> 

    <p>This is a test!</p> 
    @RenderBody() 

    <footer> 
     <p>&copy; @DateTime.Now.Year - ASP.NET Application</p> 
    </footer> 

</div> 

이의 시각에 대한 BOOTPLY입니다 내가 설명하려고하는 것.

내가 다른 것을 설명 할 수 있는지 알려주세요.

도움을 주시면 감사하겠습니다.

Answer 1

당신은 당신이 모두 navbars의 결합 된 높이 수용하기 위해 required body padding에 두 배로해야 할 2 개의 고정 navbars을 사용하고 있기 때문에 ..

body { 
    padding-top: 135px; 
} 

http://www.bootply.com/iY0za3bfls

그것은 될 필요가 없습니다 정확하게 135px, 문서에서 설명했듯이 navbar가 50px라는 것을 알고 자신의 값을 시험해보아야합니다.