[英]Bootstrap 3 navbar doesn't work anymore
Well... yesterday it worked, tomorrow dont... it's true! 好吧...昨天成功了,明天没了...是真的!
On console it gives this message: 在控制台上,它显示以下消息:
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
The page is loaded but the navbar doesn't look liked it should do: the voices are aligned in vertical instead that in horizontal (so I have many columns). 该页面已加载,但导航栏看起来不像它应该做的那样:声音在垂直方向上对齐,而在水平方向上对齐(因此我有很多列)。
I see bootstrap 4 is finally out... but I would prefere to not pass at the new version. 我看到Bootstrap 4终于发布了...但是我希望不要通过新版本。
In my html I use: 在我的html中,我使用:
<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>
I changed the last one (it doesn't have indication of the version) to: 我将最后一个(没有版本指示)更改为:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
and the message of error on the console is gone but the nav stay vertical. 并且控制台上的错误消息消失了,但导航保持垂直。 As alternative i tried to add:
作为替代,我尝试添加:
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>
and happen the same thing: the error message is gone but the navbar doesn't work. 并发生相同的事情:错误消息消失了,但导航栏不起作用。 So, I didn't add this row.
因此,我没有添加此行。
Here my code for the nav in base.html
: 这是
base.html
导航的代码:
<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>
and _navbar.html
: 和
_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>
To be clear my nav bar look something like: 要明确我的导航栏看起来像:
Title
change data
Exit
instead of: 代替:
Title change data Exit
Instead of the CDN that you are using in your <link>
tag, use this link instead 代替您在
<link>
标记中使用的CDN,而是使用此链接
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
If you try to go to this link, http://getbootstrap.com/dist/css/bootstrap.min.css
you will see that in the very beginning, it says: Bootstrap v4.0.0-beta
. 如果您尝试转到此链接
http://getbootstrap.com/dist/css/bootstrap.min.css
您将在一开始就看到它说: Bootstrap v4.0.0-beta
。 So, use the link I've provided you, instead of the one in your <head>
. 因此,请使用我提供的链接,而不要使用
<head>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.