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>

https://jsfiddle.net/ut8awbzs/5/

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

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more