Platzieren Sie die zweite Navigationsleiste unter der ersten Navigationsleiste.

Question

Ich verwende Bootstrap, um meine Navigationsleisten oben auf meiner Seite zu erstellen.

Mein Ziel ist es, eine zweite Navigationsleiste zu erstellen, die in der Höhe kleiner ist, unter der ursprünglichen Navigationsleiste liegt und oben fixiert ist, so dass der Benutzer blättert.

ich this sah, und das Hinzufügen einer margin-top:43px; hat die 2. navbar unterhalb der ursprünglichen navbar schieben, aber meine body-content nicht automatisch einstellen .. anstelle der 2. navbar schneidet nur die Spitze weg von meinem Körper-Gehalt.

Ich beginne gerade diese, so dass hier das HTML für den Original navbar zusammen mit dem zweiten navbar:

---

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> 

Hier ist ein BOOTPLY für eine visuelle von was ich versuche zu erklären.

Lassen Sie mich wissen, wenn ich noch etwas erklären kann.

Jede Hilfe wird geschätzt.

Answer 1

Da Sie mit 2 festen NavBars Sie haben auf der required body padding verdoppeln für die kombinierte Höhe der beiden NavBars zu empfangen ..

body { 
    padding-top: 135px; 
} 

http://www.bootply.com/iY0za3bfls

Es muss nicht sein genau 135px, wie in der Dokumentation erklärt, solltest du deine eigenen Werte ausprobieren, da die navbar 50px hoch ist.