Frosty88
@Frosty88

Почему не работает navbar в bootstrap 3?

Не работает выпадающая навигация, при уменьшенном размере экрана (Также на смартфонах).
Он просто на просто не открывается.
Вот сам код:
<nav class="navbar navbar-inverse navbar-static-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".showmain">
					<span class="sr-only">Toggle navigation</span>
					<i class="fa fa-navicon fa-lg"></i>
				</button>
				<a class="navbar-brand" href="index.html">Brand</a>
			</div>
			<div class="collapse navbar-collapse showmain">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html">Home</a></li>
					<li><a href="monitoring.html">Monitoring</a></li>
					<li><a href="signin.html">Account</a></li>
					<li><a href="donate.html">Donate</a></li>
					<li><a href="Forum</a></li>
				</ul>
			</div>
		</div>
	</nav>


И еще никак не могу правильно вставить виджет ВК.
  • Вопрос задан
  • 13472 просмотра
Пригласить эксперта
Ответы на вопрос 4
paradokso
@paradokso
Начинающий фронт-эндер
а вы bootstrap.min.js подключили после jQuery?
Ответ написан
@ezhara0405
<li><a href="Forum</a></li>
- пропущены закрывающие кавычки

Подсветка кода Тостера это обнаружила, так-то)
Ответ написан
Комментировать
oso_pardo
@oso_pardo
HTML, CSS, Junior JavaScript
Столкнулся с аналогичной проблемой, не работали ни выпадающие списки, ни выпадающая навигация при открытии на мобильном телефоне.
Спасибо Роман @paradokso за наводку.
Необходимо подключать JQuery перед bootstrap.min.js, но, при просмотре консоли выдало ошибку, что версия JQuery должна быть не ниже 1.9 и не выше/равна 3.0.
После того как поставил версию JQuery в этом диапазоне, все заработало.
Ответ написан
Комментировать
Добрый день, всем! у меня та же самая проблема navbar не отрисовывает меню. Подключил я JQuery перед bootstrap.min.js версией не ниже 1.9. Но все равно тщетно.
Подскажите пожалуйста?
<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> FurBoots сайт </title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/fontawesome.css">
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <!script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class= "navbar-toggle" data-toggle="colappse" data-target="navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Нейм</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"> <a href="#">101</a> </li>
            <li> <a href="#">1</a> </li>
            <li> <a href="#">2</i></a> </li>
            <li> <a href="#">3</a> </li>
          </div>
        </ul>
      </div>
    </div>
  </body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы