2017-08-11 23 views
0

まあ...昨日働いて、明日はいけない...それは本当です!ブートストラップ3のnavbarはもう動作しません

コンソール上では、このメッセージを表示します。

Error: Bootstrap dropdown require Popper.js (https://popper.js.org) 

ページがロードされているが、ナビゲーションバーには、それが何をすべき言っています見ていない:声を水平に(私は多くの列を持っていることを代わりに垂直に配列されています)。

私は最終的にブートストラップ4が出ているのを見ています...しかし、私は新しいバージョンではパスしないように勧めます。私のHTMLで

私が使用します。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

とコンソール上のエラーのメッセージ:

<link href='http://getbootstrap.com/dist/css/bootstrap.min.css' rel='stylesheet'> 
<link href='http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css' rel='stylesheet'>] 
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.min.js'></script> 

は、私は(それはバージョンの表示を持っていません)最後の1を変更しました行ったが、navは垂直に留まる。 は、別の方法として私が追加しようとしました:

script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 

と同じことが起こる:エラーメッセージがなくなっているが、ナビゲーションバーは動作しません。だから、私はこの行を追加しませんでした。

ここbase.htmlにおけるNAVのための私のコード:

<body id='body' style='margin:0; padding:10; height:100%; width:100%;'> 
    <div id='wrapper' style='min-height:100%; position:relative;'> 
    <nav class='navbar navbar-inverse navbar-fixed-top'> 
     {% include '_navbar.html' %} 
    </nav> 
    [...] 
    </div> 
</body> 

_navbar.html

{% load staticfiles %} 
{% load i18n %} 
<div class='container-fluid'> 
    <div class='navbar-header'> 
    <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'> 
     <span class='sr-only'>Toggle navigation</span> 
     <span class='icon-bar'></span> 
     <span class='icon-bar'></span> 
     <span class='icon-bar'></span> 
    </button> 
    <a class='navbar-brand' href="{% url 'core:homepage' %}">Title</a> 
    </div> 

    <div id='navbar' class='navbar-collapse collapse'> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href="{% url 'auth_password_change' %}">change data</a></li> 
     <li><a href="{% url 'auth_logout' %}?next=/home/">Exit</a></li> 
     [...] 
    </ul> 
    </div> 
</div> 

私のナビゲーションバーのようなものを見て明確にする:

                    Title 
                        change data 
                        Exit 

の代わりに:

あなたは <link>タグで使用していることを代わりにCDNの
Title                  change data Exit 

答えて

1

、あなたがこのリンク、http://getbootstrap.com/dist/css/bootstrap.min.cssへ行くしようとした場合、あなたは非常に初めに、それは言うことがわかります代わりに

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 

このリンクを使用:Bootstrap v4.0.0-beta。だから、あなたの<head>にあるものの代わりに私があなたに提供したリンクを使用してください。

関連する問題