machen den Körper von nav unter dem ehader in Bootstrap

Question

Was ich will, um das Menü 1,2,3 unter dem Kopftitel zu tun, macht nicht außer es:

<nav class="navbar navbar-default"> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <h1>First Project in Bootstrap</h1> 
 
\t \t \t <button type="button" class="navbar-toggle collapsed" 
 
\t \t \t \t data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> 
 
\t \t \t \t <span class="icon-bar"></span> <span class="icon-bar"></span> <span 
 
\t \t \t \t \t class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t </div> 
 

 
\t \t <div class="collapse navbar-collapse" 
 
\t \t \t id="bs-example-navbar-collapse-1"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <div class="nav nav-stacked"> 
 
\t \t \t \t \t <li><a href="#">Menu 1 </a></li> 
 
\t \t \t \t \t <li><a href="#">Menu 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Menu 3</a></li> 
 
\t \t \t \t </div> 
 

 
\t \t \t </ul> 
 

 
\t \t </div> 
 
\t </div> 
 
\t </nav>

Ich möchte das Menü 1 unter dem Titel nicht daneben .. irgendwelche Vorschläge ??

Answer 1

Working fiddle.

Wenn Sie keinen Zugriff auf den HTML-Code haben Sie es an den Header anhängen könnte, wenn dann Seite ist fertig:

$(function(){ 
    $('.navbar-header').append($('#bs-example-navbar-collapse-1')); 
}) 

Hoffnung, das hilft.

---

$(function(){ 
 
    $('.navbar-header').append($('#bs-example-navbar-collapse-1')); 
 
})

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <h1>First Project in Bootstrap</h1> 
 
     <button type="button" class="navbar-toggle collapsed" 
 
       data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> 
 
     <span class="icon-bar"></span> <span class="icon-bar"></span> <span 
 
                      class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" 
 
     id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <div class="nav nav-stacked"> 
 
      <li><a href="#">Menu 1 </a></li> 
 
      <li><a href="#">Menu 2</a></li> 
 
      <li><a href="#">Menu 3</a></li> 
 
     </div> 
 

 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</nav>