Bootstrap 3的导航条没有折叠。

问题描述 投票:0回答:1

我正在使用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>
        ```
html twitter-bootstrap navbar collapse
1个回答
0
投票

我看了别人的帖子,整整一个晚上,才找到一个回答我的。我下载了一个太新的jQuery版本(3.什么的),而它只适用于jQuery 1或2,我从这个问题的第一个评论中得到的想法。Navbar collapse在Bootstrap中无法使用。如果打扰了大家太久,我很抱歉,希望能帮助到其他人。

  • 检查数据目标
  • 检查jquery是否在bootstrap javascript之前被调用。
  • 检查你的jquery和bootstrap版本是否与你想要的命令functnionalities对应。
© www.soinside.com 2019 - 2024. All rights reserved.