Navbar не будет выпадающим меню после краха с использованием bootstrap

Я не могу понять, почему моя верхняя правая кнопка «Меню» не приведет к выпадающему меню. Может ли кто-нибудь указать, что случилось? Когда я нажимаю на него, ничего не происходит, но «Главная» должна выходить вниз.Navbar не будет выпадающим меню после краха с использованием bootstrap

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Store</title> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<link href="index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 

<a href = "#" class ="navbar-brand">Site</a> 

<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"> 
Menu 
</button> 
<div class="collapse navbar-collapse navHeaderCollapse"> 
<ul class = "nav navbar-nav navbar-right"> 

<li><a href="#">Home</a></li> 

</ul> 
</div> 
</div> 

</div> 









<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html>

источник

2016-01-26 user6680

Блок HTML помогает нам очень мало. Можете ли вы воспроизвести это в кодефене? –

Здесь вы найдете: http://codepen.io/anon/pen/rxdqZB – user6680

Перед загрузкой javascript-библиотеки загрузочных файлов вам необходимо загрузить javascript-библиотеку javascript. Bootstrap убегает из JQuery и не будет работать без загрузки его первого так, прежде чем bootstrap.js добавить ссылку на Jquery он должен выглядеть следующим образом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Кроме того, если вы хотите, чтобы ваш Navbar правильно работать, вы должны упаковывают ваш бренд navbar и кнопку меню в классе навигационного заголовка. Если вы хотите, чтобы ваше меню отображалось в навигационной панели по ширине мобильного устройства, вы можете оставить его таким, как оно есть.

Вот рабочий codepen Codepen

источник

2016-01-26 21:15:21

Проверить эту скрипку: fiddle

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

Единственная проблема с вашим кодом заключалась в том, что вы не вызывали библиотеку jquery. который необходим для запуска JavaScript-бутстрапа.

Вам нужно добавить этот тег скрипта в начало своего html, прежде чем вы вызовете javascript для начальной загрузки.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

источник

2016-01-26 21:16:03 stark

Эти 2 файла отсутствуют. Вы должны включить их.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Без этих файлов это не будет работать.

CHECK THIS FILE

источник

2016-01-26 21:39:49

Navbar не будет выпадающим меню после краха с использованием bootstrap

ответ

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