html - Bootstrap Navbar shows in very weird form -
i run ruby on rails 5 , use bootstrap gem. issue having when put html in 1 of partials have weird looking 'nav-bar'.
<html><head> <title>app</title> <link rel="stylesheet" media="all" href="/assets/application.self-09a09de7df140e59268bd2c94d4ba54f4e8477100ad6ca7894899b63e99bf8c7.css?body=1" data-turbolinks-track="reload"> <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/tether/tether.self-49a614f96d3d9b228d4f800376a8db0a8315c1f10eb759f66a528112980505de.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/tether.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap.self-4e71bfbf6aff83432bb0f204b1cfa3beaf9d05f0d2acf9ec752924a628245be1.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/util.self-ee646345d4a58a58a1c5f97a3def830f24884ebd628cedc00c5cc9bb748f8dcf.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/alert.self-8ec79d32a4387947ba9c697a802d190e85eaabd2d7868e188ceb32bfaff27090.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/button.self-11f2f59490a5ed1ee00730174836d887cf01ddd797cf2b080e7d9dd1f988faa3.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/carousel.self-a1068285d9397c8a3fe8911b395c0ca7eaa7d98460f68a32896dbdea5904f8ae.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/collapse.self-d36e6561deb41e4e98a568aa5be6b3d14a6d4d604d6923d3732ed8d97d734854.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/dropdown.self-9001a6392843799bd3f8fefa8f2b90bc2ea9e0a70cb5148039787b50b18abc51.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/modal.self-86f0500b4628eba403a8e8a2c31a642d399d7efebb27ccc40f03b0f98f458461.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/scrollspy.self-bc2becbc0f4b31f6fabf6aa80923e509fa9a0fb55165dac75333164564d619b2.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/tab.self-8c546e0109ea36cfbe17faff530986e24eb7043bd1237c64bcb8257f24b0285c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/tooltip.self-35e74be099c220a4b49c8a825b32613a19641d8b4538a78e819a8b9a75de2b40.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/popover.self-23ed39658a0cf53b747d72cc537e52bc9fc33b3d8eab3872d38186e3631b519c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/jquery.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-4d37d7bcf4b0b32507438063ae47ba88dd0178863f7c7a2c7125b221eefea772.js?body=1" data-turbolinks-track="reload"></script> </head> <body> <nav class="navbar navbar-default navigation-clean"> <div class="container"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">company name</a> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1" aria-expanded="false"><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 class="navbar-collapse collapse" id="navcol-1" aria-expanded="false"> <ul class="nav navbar-nav navbar-right"> <li class="active" role="presentation"><a href="#">first item</a></li> <li role="presentation"><a href="#">second item</a></li> <li role="presentation"><a href="#">third item</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">first item</a></li> <li role="presentation"><a href="#">second item</a></li> <li role="presentation"><a href="#">third item</a></li> </ul> </li> </ul> </div> </div> </nav> </body></html>
after have weird nav-bar looks on picture below.
the important nav-bar inline looks image below
thank help.
please try following code:
<div class="navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">links toggle button</span> <span class="mdl-color--white white icon-bar"></span> <span class="mdl-color--white white icon-bar"></span> <span class="mdl-color--white icon-bar"></span> </button> <a href="#"><span class="navbar-brand">company name</span></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav" style="float: right;"> <li><a href="#">first item</a></li> <li><a href="#">second item</a></li> <li><a href="#">third item</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"> dropdown<span class="mdi mdi-chevron-down"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">first item</a></li> <li role="presentation"><a href="#">second item</a></li> <li role="presentation"><a href="#">third item</a></li> </ul> </li> </ul> </div>
Comments
Post a Comment