Bootstrap 4 Beta Navbar Migration

Question

<div id="navarea"> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav custom_nav"> 
     <li class=""><a href="index.html">Home</a></li> 
     <li class="dropdown"> <a href="#" class="" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Store</a></li> 
     <li><a href="#">Media</a></li> 
     <li><a href="#">Partners</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Ich Migration einer älteren Webseite 4 Beta Bootstrap und ich habe irgendwie das navbar im Prozess zerstört. Ich bin ziemlich sicher, dass es etwas mit dem Wechsel in "toggle" und "expand" zu tun hat, aber ich habe mehrere Stunden damit gespielt, ohne Erfolg.

Die Navigationsleiste sollte als durchschnittliche Navigationsleiste oben auf der Seite angezeigt werden. Stattdessen habe ich eine kleine Box in der oberen linken Ecke, die das Menü erweitert.

Answer 1

Die Bootstrap 3-Navigationsleiste kann nicht kopiert und in Bootstrap 4 eingefügt werden. Sie müssen einige Arbeiten ausführen, um das Menü nach Ihren Wünschen neu zu erstellen.

Dies ist ein Beispielmenü für Bootstrap 4 als Referenz.

<nav class="navbar navbar-expand-lg navbar-default"> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

<div class="collapse navbar-collapse"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Store</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Media</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Partners</a> 
     </li> 
    </ul> 
</div> 

Ich empfehle den unten URL gehen würde und das Beispiel Auschecken NavBars zu verstehen, wie sie in Bootstrap arbeiten 4.

https://getbootstrap.com/docs/4.0/examples/