在引导中单击一次即可打开两个下拉列表 我使用Bootstrap作为响应站点，我有两个菜单，一个在顶部，一个在中间，问题是当我最小化我的页面布局到移动屏幕时，两个下拉菜单出现，当我点击其中一个时，它打开两个下拉菜单。这是我的密码 <!DOCTYPE html> <html> <head> <title>Rohani drs-o-taleem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css"> </head> <body> <div class="container" style="padding:30px;"> <div id="menu" class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button> <div id="logo"> <a class="navbar-brand" href="index">Zazikhan</a> </div> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar" id="my"> <li class="nav"><a id="home" href="index">Home</a></li> <li class="nav"><a id="signup" href="index/signup">Sign up</a></li> <li class="nav"><a id="sign" href="index/signin">Sign In</a></li> <li class="nav"><a id="logout" href="index/logout">Logout</a></li> <li class="nav"><a id="new_post" href="index/posts">new post</a></li> <li class="nav"><a id="show_post" href="index/show_post">Show post</a></li> <li class="nav"><a id="upload" href="index/upload_form">upload</a></li> <li class="nav"><a id="contact"href="index/contact">Contact us</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" align="center"> <div class="item active"> <img src="images/ya_rasool_allah_fb_cover_2-t1.jpg" width="100%" height="50%" alt="VISUAL STUDIO"> </div> <div class="item"> <img src="images/Untitled.jpg" width="100%" alt="PHP MYSQL"> </div> <div class="item"> <img src="images/ya_rasool_allah_fb_cover_2-t1.jpg" width="100%" height="50%" alt="VISUAL STUDIO"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="container"> <div id="menu" class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button> </div> <div class="navbar-collapse collapse" style="margin-left:160px; alignment-adjust:central"> <ul class="nav navbar-nav navbar" id="my"> <li class="nav"><a id="home" href="index">Home</a></li> <li class="nav"><a id="signup" href="index/signup">Sign up</a></li> <li class="nav"><a id="sign" href="index/signin">Sign In</a></li> <li class="nav"><a id="logout" href="index/logout">Logout</a></li> <li class="nav"><a id="new_post" href="index/posts">new post</a></li> <li class="nav"><a id="show_post" href="index/show_post">Show post</a></li> <li class="nav"><a id="upload" href="index/upload_form">upload</a></li> <li class="nav"><a id="contact"href="index/contact">Contact us</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row" style="margin-bottom:100px;" > <div class="col-lg-6" style="text-align:center;"> <span style="font-weight: bold;font-size: 20px;color: #937A51;">Speech Of the Week</span> <hr /> <span>emaan o taqwa k baad sadiqeen ki suhbt q / Fuqra K Liye Eham Naseehatain</span> <div class="hidden-xs"> <video controls style="height:240px; width:490px;"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </video> </div> <div class="visible-xs"> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div> <button class="btn btn-success btn-lg">Download</button> <button class="btn btn-info btn-lg">View more speaches</button> </div> </div> <div class="col-lg-6" style="text-align:center;"> <div> <img src="images/50x50-Uxj.jpg" height="28" width="30"> <a href="http://www.dailymotion.com/user/irmglobe#user_widget"><span style="color:#0079b8;">ISLAMI ROOHANI MISSION [OFFICIAL]</span></a> </div> <hr /> <div style="margin-bottom:10px;"> <img class="img-thumbnail img-responsive" src="images/ECquL.jpg"> </div> <button class="btn btn-lg btn-default">+ Follow</button> </div> </div> </div> <!-- starting of bottom --> <div class="container"> <div class="navbar navbar-inverse navbar-fixed-bottom"> <div class="alert-danger"> <marquee direction="left">(1)**GOOD NEWS** Watch MEHBOOB SAEEN Weekly LECTURES On ARY Channel Every Tuesday Evening at 6 pm And Every Wednesday Morning at 10:30 am.</marquee> </div> </div> </div> <!-- End of the bottom --> <script src="jquery-2.1.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> 罗哈尼drs-o-taleem 本周最佳演讲 他是一个年轻人，也是一个年轻人 您的浏览器不支持音频元素。 +跟随 （1） **好消息**每周二晚上6点和每周三上午10:30在ARY频道观看MEHBOOB SAEEN每周讲座。
下拉菜单的问题在于两者都有相同的目标类，即导航栏折叠 切换按钮的目标是此代码中的两个下拉列表：在引导中单击一次即可打开两个下拉列表 我使用Bootstrap作为响应站点，我有两个菜单，一个在顶部，一个在中间，问题是当我最小化我的页面布局到移动屏幕时，两个下拉菜单出现，当我点击其中一个时，它打开两个下拉菜单。这是我的密码 <!DOCTYPE html> <html> <head> <title>Rohani drs-o-taleem</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css"> </head> <body> <div class="container" style="padding:30px;"> <div id="menu" class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button> <div id="logo"> <a class="navbar-brand" href="index">Zazikhan</a> </div> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar" id="my"> <li class="nav"><a id="home" href="index">Home</a></li> <li class="nav"><a id="signup" href="index/signup">Sign up</a></li> <li class="nav"><a id="sign" href="index/signin">Sign In</a></li> <li class="nav"><a id="logout" href="index/logout">Logout</a></li> <li class="nav"><a id="new_post" href="index/posts">new post</a></li> <li class="nav"><a id="show_post" href="index/show_post">Show post</a></li> <li class="nav"><a id="upload" href="index/upload_form">upload</a></li> <li class="nav"><a id="contact"href="index/contact">Contact us</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" align="center"> <div class="item active"> <img src="images/ya_rasool_allah_fb_cover_2-t1.jpg" width="100%" height="50%" alt="VISUAL STUDIO"> </div> <div class="item"> <img src="images/Untitled.jpg" width="100%" alt="PHP MYSQL"> </div> <div class="item"> <img src="images/ya_rasool_allah_fb_cover_2-t1.jpg" width="100%" height="50%" alt="VISUAL STUDIO"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="container"> <div id="menu" class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button> </div> <div class="navbar-collapse collapse" style="margin-left:160px; alignment-adjust:central"> <ul class="nav navbar-nav navbar" id="my"> <li class="nav"><a id="home" href="index">Home</a></li> <li class="nav"><a id="signup" href="index/signup">Sign up</a></li> <li class="nav"><a id="sign" href="index/signin">Sign In</a></li> <li class="nav"><a id="logout" href="index/logout">Logout</a></li> <li class="nav"><a id="new_post" href="index/posts">new post</a></li> <li class="nav"><a id="show_post" href="index/show_post">Show post</a></li> <li class="nav"><a id="upload" href="index/upload_form">upload</a></li> <li class="nav"><a id="contact"href="index/contact">Contact us</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row" style="margin-bottom:100px;" > <div class="col-lg-6" style="text-align:center;"> <span style="font-weight: bold;font-size: 20px;color: #937A51;">Speech Of the Week</span> <hr /> <span>emaan o taqwa k baad sadiqeen ki suhbt q / Fuqra K Liye Eham Naseehatain</span> <div class="hidden-xs"> <video controls style="height:240px; width:490px;"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </video> </div> <div class="visible-xs"> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div> <button class="btn btn-success btn-lg">Download</button> <button class="btn btn-info btn-lg">View more speaches</button> </div> </div> <div class="col-lg-6" style="text-align:center;"> <div> <img src="images/50x50-Uxj.jpg" height="28" width="30"> <a href="http://www.dailymotion.com/user/irmglobe#user_widget"><span style="color:#0079b8;">ISLAMI ROOHANI MISSION [OFFICIAL]</span></a> </div> <hr /> <div style="margin-bottom:10px;"> <img class="img-thumbnail img-responsive" src="images/ECquL.jpg"> </div> <button class="btn btn-lg btn-default">+ Follow</button> </div> </div> </div> <!-- starting of bottom --> <div class="container"> <div class="navbar navbar-inverse navbar-fixed-bottom"> <div class="alert-danger"> <marquee direction="left">(1)**GOOD NEWS** Watch MEHBOOB SAEEN Weekly LECTURES On ARY Channel Every Tuesday Evening at 6 pm And Every Wednesday Morning at 10:30 am.</marquee> </div> </div> </div> <!-- End of the bottom --> <script src="jquery-2.1.0.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> 罗哈尼drs-o-taleem 本周最佳演讲 他是一个年轻人，也是一个年轻人 您的浏览器不支持音频元素。 +跟随 （1） **好消息**每周二晚上6点和每周三上午10:30在ARY频道观看MEHBOOB SAEEN每周讲座。,html,twitter-bootstrap,Html,Twitter Bootstrap,下拉菜单的问题在于两者都有相同的目标类，即导航栏折叠 切换按钮的目标是此代码中的两个下拉列表： <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></s
<button class="btn btn-success navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button>
<div class="navbar-collapse-2 collapse" style="margin-left:160px; alignment-adjust:central">
<ul class="nav navbar-nav navbar" id="my">
<li class="nav"><a id="home" href="index">Home</a></li>
<li class="nav"><a id="signup" href="index/signup">Sign up</a></li>
<li class="nav"><a id="sign" href="index/signin">Sign In</a></li>
<li class="nav"><a id="logout" href="index/logout">Logout</a></li>
<li class="nav"><a id="new_post" href="index/posts">new post</a></li>
<li class="nav"><a id="show_post" href="index/show_post">Show post</a></li>
<li class="nav"><a id="upload" href="index/upload_form">upload</a></li>
<li class="nav"><a id="contact"href="index/contact">Contact us</a></li>
</ul>
</div>
另一个问题出现了，在桌面屏幕上隐藏所有菜单，所有菜单只出现在手机屏幕上。你需要在JSFIDLE或jsbin上重新创建这个问题，这样我可以更好地帮助你。