質問
I'm trying to get a basic dropdown menu in Bootstrap:
https://stackoverflow.com/questions/14023115
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>
However, nothing shows up. I know the local CSS and JS files are being referred correctly. As far as I understand, the default JS includes all the plugins.
EDIT: Thanks to all for your feedback. I can only add, in case people find themselves in the same situation I am, to move further down in the tutorial before copying and pasting the snippets.
解決
I think your code was basically good, but you are missing a link to trigger the drop down. See ths jsFiddle
Note that I added
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
Here's an example of how to include it in a complete nav bar
Good luck!
他のヒント
Please pay extra attention to comment <-- Link or button to toggle dropdown --> in you code. You need to put a Link or button with data-toggle="dropdown" property to activate the Dropdown.
Try this :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> TestDropdown
<span class="caret"></span>
</a>
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> TestDropdown
<span class="caret"></span>
</a>
<a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>From the docs:
Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.
So you probably need to set the CSS for your dropdown class to have (at least) position: relative;. Also you have a display:none on .dropdown-menu by default. Try also overriding that.
Instead of div,try a parent ul and li to wrap your ul that you have posted above. for example,
<ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
<li class= "dropdown" data-dropdown="dropdown">
<a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
<b class="caret dropdown-toggle"></b>
</a>
<ul class="dropdown-menu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
I dont think tab-index will be necessary as bootstrap css takes care of that. Good luck!
In my case I discovered the .dropdown-menu bootstrap class had set the top property to:top: 100%, that caused that the dropdown was shown outside the viewport. I did override the top value with another class and now is working.
