Место второй навигатор под первым навигатором

Question

Я использую Bootstrap для создания навигационных баров в верхней части моей страницы.

Моя цель состоит в том, чтобы создать вторую навигационную панель, которая меньше по высоте, идет под оригинальной навигационной панелью и фиксируется в верхней части, так что когда пользователь прокручивает .. обе полосы навигации прокручиваются вместе с ними.

Я смотрел на this, и добавление margin-top:43px; делает толчок 2-й Navbar под оригинальной навигационной панелью, но мой body-content не автонастройка .. вместо этого второго Navbar просто разрежет довершение моего тела-контент.

Я только начинаю это, так что здесь HTML для моей оригинальной навигационной панели вместе со 2-й навигационной панели:

---

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

Поскольку вы используете 2 фиксированных NavBars вы должны удвоить на required body padding для размещения для комбинированной высоты обоих NavBars ..

body { 
    padding-top: 135px; 
} 

http://www.bootply.com/iY0za3bfls

Он не должен быть ровно 135 пикселей, как объясняется в документах, вы должны попробовать свои собственные значения, зная, что navbar высотой 50 пикселей.