bootstrap logo und navbar in verschiedenen Zeilen

Question

Ich kann nicht scheinen, die Navbar zu erstellen, die ich will, ich möchte das Logo oben links haben, dann möchte ich die Leiste in der Mitte in einer neuen Zeile darunter, jetzt sobald es zusammenbricht, möchte ich, dass der Button rechts neben dem Logo in derselben Zeile steht.

Dies ist, wie ich es aussehen soll:

Ausführliche

Komprimiert

dies ist der Code, den ich mit einmal zu arbeiten versucht, ich knalle den unter dem logo gezeigten knopf zusammen und wenn ich dann das logo tag in das nav lege Im Vollbild zeigt es das Logo und die Leiste im selben like und nicht Logo oben, ich habe es auch mit relativer Position versucht, aber dann klappt der Kollaps nicht gut.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
<header class="masthead"> 
 
    <h3 class="text-muted">Project name</h3> 
 

 
    <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3"> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarCollapse"> 
 
     <ul class="navbar-nav text-md-center nav-justified w-100"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Projects</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Services</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Downloads</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">About</a> 
 
     </li> 
 
     <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
 
      <div class="dropdown-menu" aria-labelledby="dropdown01"> 
 
      <a class="dropdown-item" href="#">Action</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header>

Answer 1

Der Grund, es auf dem Handy nicht auf der gleichen Linie ist, weil die <h3>Project Name</h3> außerhalb des Header div ist so, wenn es sie sind beide in getrennten Blöcken zusammengebrochen ist.

Verwenden Sie einfach die Standard-Bootstrap navbar Beispiel und ersetzen Sie die <a class="navbar-brand">Brand</a> mit dem <h3>Project Title</h3>

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <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> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>