[英]Dropdown menu is not centered on the selected dropdown button
我正在创建一个下拉菜单,但是单击时,我的LinkButton1的下拉菜单与按钮本身不对齐(而是下拉到第一个按钮下方)。 我正在使用引导程序。
这是我的代码:
<div class="dropdown" >
<ul> <li>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's
<span class="caret"></span></button>
<ul class="dropdown-menu ">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li>
<asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton>
<ul class="dropdown-menu ">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li>
<ul class="nav navbar-right">
<li id="google_translate_element"></li><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
</li>
</ul>
(旁注:我在右侧添加了一个Google Translator API)
如何将我的Linkbutton的下拉菜单与Linkbutton本身而不是第一个按钮对齐?
检查是否有帮助
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="list-inline"> <li> <div class="dropdown" > <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's <span class="caret"></span></button> <ul class="dropdown-menu "> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </li> <li> <div class="dropdown" > <asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton> <ul class="dropdown-menu "> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </li> <!--<li> <div class="dropdown" > <ul class="nav navbar-right"> <li id="google_translate_element"></li><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element'); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </ul> </div> </li>--> </ul> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.