Question

我正在使用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>

Answer 1

下拉菜单的问题是它们都具有相同的目标类，即navbar-collapse。

切换按钮的目标是此代码中的下拉列表：

<button class="btn btn-success navbar-toggle" 
                  data-toggle="collapse"
                  data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span></button>

数据目标=＆＃34; .navbar合拢＆＃34;

您需要做的就是更改第二个下拉菜单的类。

<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>

添加其他按钮并使用

数据目标=＆＃34; .navbar塌-2＆＃34;

在bootstrap中单击即可打开两个下拉菜单

1 个答案: