All geek questions in one place

Error Bootstrap v4 Navbar?

Here is the problem. I applied the default navbar example from the bootstrap ( https://v4-alpha.getbootstrap.com/components/navbar/ ). They show a full-size navigation bar as a result, which may crash when the screen gets smaller. But when I pasted the code into my project, it shows this:

https://ibb.co/fjBNhQ

As you can see, it always collapses. I tried many other examples, but nothing works. Here is the code:

<!DOCTYPE html> <html> <head> <title>Test area</title> <link rel="stylesheet" href="media/css/bootstrap.min.css"> </head> <body> <div class="header"> <div class="top-header"> <div class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav> </div> </div> </div> <script src="media/js/jquery.min.js"></script> <script src="media/js/popper.min.js"></script> <script src="media/js/bootstrap.min.js"></script> </body> </html>
+5
source share
3 answers

The code you submitted will only work with the alpha 6 bootstrap, not the beta. This is because the navbar-toggleable* classes have changed to navbar-expand* for the beta version of Bootstrap 4.

Bootstrap 4.0.0 : https://www.codeply.com/go/0c0FC1Lrn2

  <nav class="navbar navbar-expand-lg navbar-light bg-faded"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav>

Also see: Bootstrap 4 navigation bar layout works using CDN, breaks using loaded code

+5
source

You need to add the necessary meta tags as described here :

  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

And use the correct css classes as described here

 <nav class="navbar navbar-expand-lg navbar-light bg-light">

Navigation bar will crash at lg breakpoint

 <!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Test area</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <div class="header"> <div class="top-header"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav> </div> </div> </div> <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
0
source

For those who are watching now, the code now works with the current last download.

 npm install bootstrap@4.0.0-beta.3

Remember to restart to check the change!

0
source

Source: https://habr.com/ru/post/1271273/

More articles:


All Articles