Bootstrap 3导航栏不起作用了 [英] Bootstrap 3 navbar doesn't work anymore
问题描述
在控制台上，它会显示以下信息：
错误：Bootstrap下拉菜单需要Popper.js（https://popper.js.org）
页面已加载，但导航栏看起来并不喜欢它应该做的事情：声音在垂直而不是在水平方向排列（所以我有很多列）。
我看到引导程序4终于出来了......但我会优先考虑在新版本中不传递。
在我使用的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>
我将最后一个（它没有指示版本）更改为：
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js integrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< / script>
并且控制台上的错误消息已消失，但导航栏保持垂直状态。
作为替代方案，我尝试添加：
脚本src =https://cdnjs.cloudflare.com/ajax /libs/popper.js/1.11.0/umd/popper.min.jsintegrity =sha384-b / U6ypiBEHpOf / 4 + 1nzFpr53nxSS + GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4crossorigin =anonymous>< / script>
发生同样的事情：错误信息消失，但导航栏不起作用。因此，我没有添加这一行。
这里我在 base.html ：
< body id ='body'style ='margin：0;填充：10;高度：100％;宽度：100％;>
< div id ='wrapper'style ='min-height：100％;位置：相对;>
< nav class ='navbar navbar-inverse navbar-fixed-top'>
{％include'_navbar.html'％}
< / nav>
[...]
< / div>
< / body>
和 _navbar.html ：
{％load staticfiles％}
{％load i18n％}
< button type ='button'class ='navbar-toggle collapsed'data-toggle ='collapse'data-target ='＃navbar'aria-expanded ='false'aria-controls ='navbar'> ;
< span class ='sr-only'>切换导航< / 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'％}>标题< / a>
< / div>
< div id ='navbar'class ='navbar-collapse collapse'>
< ul class ='nav navbar-nav navbar-right'>
< li>< a href ={％url'auth_password_change'％}>更改数据< / a>< / li>
< li>< a href ={％url'auth_logout'％}？next = / home />退出< / a>< / li>
[...]
< / ul>
< / div>
< / div>
要清楚我的导航栏的外观如下所示：
标题
更改数据
退出
而不是：
标题变更数据退出
取代您在< link> 标记，改为使用此链接
< link rel =stylesheethref =https：//maxcdn.bootstrapcdn。 com / bootstrap / 3.3.7 / css / bootstrap.min.css/>
如果您尝试访问此链接， http：// getbootstrap。 com / dist / css / bootstrap.min.css 你会在开始时看到： Bootstrap v4.0.0-beta 。因此，请使用我提供给您的链接，而不要使用< head> 中的链接。
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.
In my html I use:
<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:
<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:
{% 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 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. So, use the link I've provided you, instead of the one in your <head>.
这篇关于Bootstrap 3导航栏不起作用了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
