currently, appears v4 has no documentation on using navbar dropdowns. following the v3 docs, navbar on v4 drop down on click, appears unstyled. how can dropdown appear shown in v3 docs? i'm assuming css selector has changed; if that's case, how go finding new undocumented selector?
this looks v3 classes on v4 library:
the html used:
<!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> <a class="navbar-brand" href="/">helloworld</a> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">map</a></li> <li><a href="#">grid</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">map</a></li> <li><a href="#">grid</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">map</a></li> <li><a href="#">grid</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="">test</a></li> </ul> <ul class="nav navbar-nav pull-xs-right"> <li class="nav-item"><a class="nav-link" href="">logout </a></li> </ul> </nav> </body> </html>
you using <li> , <ul> whereas documentation suggests use <div> , <a> tags instead
<div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" id="dropdownmenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 1 </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu2"> <button class="dropdown-item" type="button">action</button> <button class="dropdown-item" type="button">another action</button> <button class="dropdown-item" type="button">something else here</button> </div> </div> edit: fiddle reference
edit2: ok u missed classes btn , btn-success. add css rule
.dropdown { display:inline-block;}
edit3: fiddle link: dropdown 1 <a> instead of <button>
Comments
Post a Comment