出现在汉堡图标附近的下拉菜单
[英]Display dropdown-menu near hamburger icon when it appears
问题描述
How can I display correctly one existing dropdown-menu near hamburger-menu when it appears? 
出现在汉堡菜单附近时，如何正确显示一个现有的下拉菜单？
I tried to find this way, but no success. 我试图找到这种方式，但没有成功。 Can not correctly move it out! 无法正确将其移出！ Also did not find some examples to do it. 也没有找到一些例子来做到这一点。 To make a new dropdown-menu and hide another is not a problem, but to move this one near hamburger-menu correctly is not so easy. 制作一个新的下拉菜单并隐藏另一个菜单不是问题，但是要正确地将其移动到汉堡菜单附近并不是一件容易的事。 For me, ofcorse :) 对我而言，ofcorse :)
But I think after that there will be some other problems. 但是我认为之后还会有其他问题。 Overlap each other and so on... 彼此重叠，依此类推...
Maybe really choose the easiest way and make new one? 也许真的选择了最简单的方法来制作新方法？
Anyway, maybe someone wiser can help and do it if there is nothing to do :) 无论如何，如果无事可做，也许聪明的人可以帮助您并做:)
Maybe for somebody else will be useful... 也许对其他人有用。
1 个解决方案
解决方案1
0 2017-11-12 20:29:54
<head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <ul class="nav navbar-nav" style="display:inline-block;float:right;position:relative;right:70px;"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Second <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Second-1</a></li> <li><a href="#">Second-2</a></li> <li><a href="#">Second-3</a></li> </ul> </li> </ul> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="right:-60px;"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">First</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Second <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Second-1</a></li> <li><a href="#">Second-2</a></li> <li><a href="#">Second-3</a></li> </ul> </li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fifth <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Fifth-1</a></li> <li><a href="#">Fifth-2</a></li> <li><a href="#">Fifth-3</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
This alignment will be ok as long as button is displayed a better behavior of the dropdown, when click it you could change the width property. 只要按钮显示的下拉菜单行为更好，此对齐就可以，单击时可以更改width属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.