Das Burger-Icon wird nicht in der Navigationsleiste zentriert?

Das ist mein Code.Das Burger-Icon wird nicht in der Navigationsleiste zentriert?

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <title>Personal Portfolio</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="/js/my.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body data-spy="scroll" data-target=".navbar" data-offset="100"> 
 
    <!- Navbar--> 
 
    <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;"> 
 
    <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
<span class="navbar-toggler-icon"></span> 
 
</button> 
 
    <a class="navber-brand" href="#"> 
 
Navbar Brand 
 
</a> 
 
    <div class="collapse navbar-collapse" id="mainNav"> 
 
     <ul class="navbar-nav ml-auto"> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">About</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Portfolio</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

Wenn das Fenster in voller Größe, alle Links sind Zentrum aligned.But, wenn ich das Fenster kleiner, das Burger-Symbol ausrichten nicht zum Zentrum des navbar machen. Wie kann ich das beheben?

Quelle

2017-12-06 Aakash Dasgupta

Bitte aktualisieren Sie den Code mit allen erforderlichen Dateien a [MCVE] – mplungjan

Nur um zu klären zu haben, das Problem mit dem zu tun ist _vertical_ alignment, oder? – SpoonMeiser

Du wirst dich selbst treten! Es ist so eine kleine Sache, aber ändern Sie Ihre Navbar Markenklasse zu "Navbar-Marke" anstelle von "Navber-Marke" – James

Sie haben einen Rechtschreibfehler navber-brand statt navbar-brand

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <title>Personal Portfolio</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="/js/my.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body data-spy="scroll" data-target=".navbar" data-offset="100"> 
 
    <!- Navbar--> 
 
    <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;"> 
 
    <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
<span class="navbar-toggler-icon"></span> 
 
</button> 
 
    <a class="navbar-brand" href="#"> 
 
Navbar Brand 
 
</a> 
 
    <div class="collapse navbar-collapse" id="mainNav"> 
 
     <ul class="navbar-nav ml-auto"> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">About</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Portfolio</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

Quelle

2017-12-06 13:45:20 Mik3NL

"Diese Frage wurde durch ein Problem verursacht, das nicht mehr reproduziert werden kann, oder ein einfacher Tippfehler" ist einer der üblichen engen Gründe. Solche Fragen sollten nicht beantwortet werden. – Quentin

Behebt das Problem nicht. –

Das Burger-Icon wird nicht in der Navigationsleiste zentriert?

Antwort

Verwandte Themen