Bootstrap 3.0.2 отзывчивое меню

У меня есть этот код, и я не могу понять, почему он не работает. Настольная версия, похоже, работает нормально, но когда я использую ее на чувствительных устройствах, она не открывает меню. Вот мой код.Bootstrap 3.0.2 отзывчивое меню

Я надеюсь, что некоторые из вас могут мне помочь, потому что я пытаюсь запустить это небольшое сообщество, и это будет не так хорошо, если отзывчивое меню не работает. Спасибо!

<!DOCTYPE html> 
<html> 
    <head> 
    <title>e3w Networks</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bignav.css" rel="stylesheet" media="screen"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<body background="mcpic.png"> 
<script src="js/jquery.js"></script> 
<div class="navbar-wrapper"> 
<div class="container"> 
<p></p> 
<nav class="navbar navbar-default navbar-static"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> 
      <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="index.html"><img src="e3wlogo.png" width="120" "height="44"></a> 
    </div> 


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
     <li><a href="shop.html"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li> 
      <li class="dropdown dropdown-large"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Teams<b class="caret"></b></a> 

       <ul class="dropdown-menu dropdown-menu-large row"> 
        <li class="col-sm-3"> 
         <ul> 
          <li class="dropdown-header">LoL Teams</li> 
          <li><a href="http://www.e3w.dk/dwa">dwA.</a></li> 
          <li><a href="#">Button toolbar</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Nesting</a></li> 
          <li class="divider"></li> 
          <li class="dropdown-header">Minecraft</li> 
          <li><a href="http://www.e3w.dk/dwa">dwA.</a></li> 
          <li><a href="#">Button toolbar</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Nesting</a></li> 
         </ul> 
        </li> 
        <li class="col-sm-3"> 
         <ul> 
          <li class="dropdown-header">CS:GO Teams</li> 
          <li><a href="http://www.e3w.dk/dwa">dwA.</a></li> 
          <li><a href="#">Button toolbar</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Nesting</a></li> 
          <li class="divider"></li> 
          <li class="dropdown-header">CS:S Teams</li> 
          <li><a href="http://www.e3w.dk/dwa">dwA.</a></li> 
          <li><a href="#">Button toolbar</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Nesting</a></li> 
         </ul> 
        </li> 
        <li class="col-sm-3"> 
         <ul> 
          <li class="dropdown-header">asdad</li> 
          <li><a href="#">Basic example</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li><a href="#">Sizing</a></li> 
          <li class="divider"></li> 
          <li class="dropdown-header">Navs</li> 
          <li><a href="#">Tabs</a></li> 
          <li><a href="#">Pills</a></li> 
          <li><a href="#">Justified</a></li> 
         </ul> 
        </li> 
        <li class="col-sm-3"> 
         <ul> 
          <li class="dropdown-header">Information</li> 
          <li class="disabled"><p class="navbar-text">If you want your team in this game group<br \> section please click on the "Add your team" button.<br \>When you click and fill the form, you also need to<br \> agree to our policy/rules</p></li> 

          <li class="disabled"><a href="#"><button type="button" class="btn btn-block btn-group-sm"> 
    <span class="glyphicon glyphicon-plus"></span> Add your team 
</button></a></li> 
         </ul> 
        </li> 
       </ul> 

      </li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 

     </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span> Help us</a></li> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <div class="modal-title" id="myModalLabel"><!-- Nav tabs --> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">Overview</a></li> 
    <li><a href="#donate" data-toggle="tab">Donation</a></li> 
    <li><a href="#youtube" data-toggle="tab">YouTube</a></li> 
    <li><a href="#facebook" data-toggle="tab">Facebook</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">You can help us in many ways.</div> 
    <div class="tab-pane" id="donate">donate</div> 
    <div class="tab-pane" id="youtube">subscribe</div> 
    <div class="tab-pane" id="facebook">asdasd<p>sada</p></div> 
</div></div> 
     </div> 

    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li class="disabled"><a href="#">We're sorry, but the login form isn't coded yet.</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div><!-- /.nav-collapse --> 
</nav> 
    <div class="well"><p>So far from done</p><div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 17%"> 
    <span class="sr-only">17% Complete (success)</span></div> 
    </div><div class="row"> 
</div><div class="well"> 
     <table border="0"> 
<tr width="70%"> 
<td><div style="position:relative;width:280px;"> 
<a class="pull-left" style="position:relative; margin: 4px 5px 0 0;"> 
<img class="avatar" src="https://minotar.net/avatar/MarcusHegelund/32.png" player="MarcusHegelund" size="32" width="32" height="32" style="width: 32px; height: 32px; vertical-align: bottom;"> 
</a> 
<a href="#" style="color: red"><b>Marcus</b></a> 
<span class="label" style="background-color: green; color: white">Owner</span> 
<span class="label" style="background-color: purple; color: white">Developer</span> 
<span class="label" style="background-color: #FA0; color: white">Staff</span> 
<p><i>Posted Nov. 16'th, 2013</i></p> 
</div></td> 
<td><p>hey</p><p>hey</p><p>hey</p><p>hey</p></td> 
</table> 
</div></div> 
<nav class="navbar navbar-default navbar-static-bottom" role="navigation"> 
<p class="navbar-text">&copy Copyright 2011-2013, e3w Networks.</p> 
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p> 
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p> 
</nav> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

источник

2013-11-16 Marcus

зачем использовать дважды файл Jquery ?, такие как

<script src="js/jquery.js"></script> 
<script src="https://code.jquery.com/jquery.js"></script>

и есть два тела

<body background="mcpic.png">

изменить следующий код data-target=".navbar-collapse"

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">

источник

2013-11-16 16:26:27

Это верно. Я их не видел, но как это изменило навигацию? Спасибо в любом случае ... – Marcus

отредактируйте ответ –

Спасибо! Я не знал, что я сделал не так, а затем вы получили ответ менее чем за 5 минут! Спасибо чувак! – Marcus

Bootstrap 3.0.2 отзывчивое меню

ответ

Смежные вопросы