Navbar работает в bootstrap v3.0, но не в v3.3.6

-1

Навигатор не работает в новой версии bootstrap (v3.3.6), проблема с этим заключается в том, что часть javascript не работает, как переключение на мобильный вид и выпадающего меню и отдыха.Navbar работает в bootstrap v3.0, но не в v3.3.6

Код отлично работает, когда я заменяю его на V3.0 загрузочного устройства, но не работает при использовании с 3.3.6 (CDN и офлайн). Я перекрестно проверял ошибки орфографии и каталога.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Guru Prasad - Freelance</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="includes/css/style.css"> 
    <script src="includes/js/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 

<div class="navbar fixed-top"> 
<div class="container"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand">Guru Prasad</a> 
    </div> <!-- Navbar-Header --> 

    <div class="navbar-collapse collapse"> 
     <ul class="navbar nav"> 
      <li class="active">Portfolio</li> 
      <li>About</li> 
      <li>Contact</li> 
     </ul> <!-- End Navbar-nav --> 
    </div> <!-- End Navbar-collapse --> 

</div> <!-- End Container --> 
</div> <!-- End Navbar --> 

<!-- //Javascript --> 
<script type="text/javascript" src="includes/js/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="includes/js/script.js"></script> 
</body> 
</html>

источник

2016-06-02 am guru prasath

Что _does не work_ на самом деле означает? Вам необходимо предоставить подробную информацию о проблеме, которую вы испытываете. – vanburen

@vanburen navbar –

Вы все еще не объяснили, что относительно ** navbar ** не работает, основываясь на том, что вы предоставили, они работают одинаково в версиях v3.0 и v3.3.6. Проверьте документацию, потому что вам не хватает некоторых элементов, которые могут вызвать проблемы в любой версии v3 в любом случае -> [Navbar] (https://getbootstrap.com/components/#navbar). – vanburen

на основе кода вы предоставили (если вы делаете что-то за пределами по умолчанию, вам нужно указать, что) я не могу видеть, как либо может реально работать.

Вы не Прикрепление DATA-целевой (data-target="#mobile-collapse") атрибут к Navbar-схлопывания DIV (<div class="navbar-collapse collapse" id="mobile-collapse">).

То же самое относится и к HTML следующими примерами с использованием v3.0 и v3.3.6. См. Navbar Документы.

Работа 3.0 Пример

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand">Guru Prasad</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="mobile-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="">Portfolio</a> 
 
     </li> 
 
     <li><a href="">About</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

Работа 3.3.6 Пример

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand">Guru Prasad</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="mobile-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="">Portfolio</a> 
 
     </li> 
 
     <li><a href="">About</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

источник

2016-06-02 15:41:06 vanburen

Navbar работает в bootstrap v3.0, но не в v3.3.6

ответ

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