1

При уменьшении окна браузера панель навигации сворачивается, но раскрыть её обратно не получается, хотелось бы чтобы при нажатии на кнопку список раскрывался. Как решить данную проблему?

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
    <title>Simple landing page</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Merienda:700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toogle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Landy</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Screenshots</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Download</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Панель навигации Свернутое панель навигации

10

2 ответа 2

2

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="navbar-toggler btn btn-navbar" type="button" data-toggle="collapse" data-target=".nav-collapse" aria-controls="nav-collapse" aria-expanded="false" aria-label="Toggle navigation">
    								<span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    								<span class="icon-bar"></span>
  							</a>
                <a class="brand" href="#">Landy</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Screenshots</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Download</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

0

Ошибка была в том, что я вместо data-toggle написал data-toogle

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

Предыдущий вариант отправленный Павелом Игоревичем тоже неожиданно заработал.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.