Bootstrap 4.0 Collapsible Navbar with Fixed Top not Wrapping Menu Tabs -
i attempting re-build site using bootstrap either doing wrong or may have hit bug.
in short, i'm using sample collapse navbar bootstrap samples (navbar-toggler). i'm using javascript fill in menu items. thing after number of tabs added, continues add them inline instead of wrapping tabs. i've added jsfiddle should show same behavior. builds 40 tabs should make 2 or 3 rows, instead puts them inline.
any thoughts?
<!doctype html> <html lang="en"> <head> <title>bootstrap example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <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://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body onload="addtabs()"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarnav" aria-controls="navbarnav" 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="navbarnav"> <ul class="navbar-nav" id="mynavbarentries"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> </ul> </div> </nav> <script type = "text/javascript"> function addtabs(){ var v = document.getelementbyid("mynavbarentries"); for(var x=0; x<20;x++){ var = document.createelement("li"); var q = (x>0)?"nav-item":"nav-item active"; a.classname = q; a.innerhtml = '<a class="nav-link disabled" href="#">new tab</a>' v.appendchild(a); } } </script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-a7fzj7v+d/sdmmqp/noqwlilvusjfdhw+k9omg/a/eheadgtzns3hpfag6ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-dztdapbwprxsa/3eyeeuwrwcy7g5kfbe8ffjk5jaixuyhkkdx6qin1dkwx51bbrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vbwwzlzj8ea9acx4pew3rvhjgjt7zpknpzk+02d9phzyevke+jo0iegizqplforn" crossorigin="anonymous"></script> </body> </html>
all needs go @ bottom before closing body tag <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>
Comments
Post a Comment