Bootstrap 3 навбар не разрушается - PullRequest
0 голосов
/ 01 мая 2020

Я разрабатываю свой собственный сайт, используя bootstrap, и я добавил панель навигации свертывания, зафиксированную сверху, но она не разворачивается, когда я нажимаю кнопку гамбургера. Я читал некоторые блоги, и у меня, похоже, нет двух основных проблем: - не ставить хорошую цель для данных - не ставить вызов jquery перед bootstrap javascript Я потратил всю литературу Сегодняшний день пытается выяснить это. Вот мой html, если вы найдете что-то, я бы так обрадовался.


<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" media="screen" type="text/css" href="cvop1.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" type="text/css" href="petite_version1.css" />

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <title> Oncle Joe </title>
    </head>


    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                <div class="navbar-header">

                      <button type="button" class="navbar-toggle" data-toggle="collapse" 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="#">Joseph Durand</a>

                </div>

                 <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Formations <span class="caret"></span>  </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Cours proposés</li>
                        <li><a href="#">Macroéconomie</a></li>
                        <li><a href="#">Histoire de la philosophie politique</a></li>
                        <li><a href="#">Mécanique quantique</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Suggestions et avis</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Orientation<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Guide des études</li>
                        <li><a href="#">Études à l'étranger</a></li>
                        <li><a href="#">Autres témoignages</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Ajoutez vos parcours</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Art<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Découvrez et commmentez !</li>
                        <li><a href="#">Musique</a></li>
                        <li><a href="#">Artistes famille</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Partagez-moi vos créations</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Proches<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Un accès public et privé</li>
                        <li><a href="#">Ma mif</a></li>
                        <li><a href="#">Ma meuf</a></li>
                        <li><a href="#">Mes gars sûrs</a></li>
                    </ul>
                </li>

                <li> <a href="#"> Mini-jeux </a></li>

                <li> <a href="https://josephwatchdog.github.io/CV/#"> <img src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-1/p320x320/15871974_1190156091033303_4585352380125885170_n.jpg?_nc_cat=103&_nc_sid=dbb9e7&_nc_ohc=qn93db1mdrMAX_7cN9y&_nc_ht=scontent-cdt1-1.xx&_nc_tp=6&oh=495fb008b60203147ed553338147388b&oe=5EC9B841" alt="C'est moi!" width="22" height="22"/> </a> </li>
                </ul>

                </div>


         </nav>
        ```

1 Ответ

0 голосов
/ 02 мая 2020

Весь вечер я прочитал другие посты и только что нашел ответ, отвечающий моим. Я скачал слишком свежую jQuery версию (3. что-то), тогда как она работает только с jQuery 1 или 2. Я получил идею из первого комментария к этому вопросу: Свертывание Navbar не работает в Bootstrap Извините, если я слишком долго беспокоил кого-либо из вас, и надеюсь, что это поможет другим:

  • Проверьте целевой объект данных
  • Убедитесь, что jquery вызывается до bootstrap javascript
  • Убедитесь, что ваши версии jquery и bootstrap соответствуют нужным командам / функциям
...