Bootstrap 3 导航栏不再工作

法比奥

嗯……昨天有效,明天不行……这是真的!

在控制台上,它给出了以下消息:

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

页面已加载,但导航栏看起来不像它应该做的:声音垂直对齐而不是水平对齐(所以我有很多列)。

我看到 bootstrap 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-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

控制台上的错误消息消失了,但导航保持垂直。作为替代方案,我尝试添加:

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

<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

代替:

Title                                                                      change data   Exit
弗拉基米尔·约瓦诺维奇

<link>使用此链接代替您在标签中使用的 CDN

<link rel="stylesheet" href="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>.

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap 3导航栏

来自分类Dev

使Bootstrap导航栏工作

来自分类Dev

居中的Bootstrap 3导航栏

来自分类Dev

Bootstrap 3导航栏高度

来自分类Dev

Twitter Bootstrap 3中的多个固定的顶部导航栏标题无法正常工作?

来自分类Dev

Twitter Bootstrap 3中的多个固定的顶部导航栏标题无法正常工作?

来自分类Dev

Bootstrap3导航栏填充内容

来自分类Dev

Bootstrap 3-导航栏的高度

来自分类Dev

Twitter的Bootstrap 3导航栏的样式

来自分类Dev

Bootstrap 3导航栏折叠不扩展

来自分类Dev

Bootstrap 3的无响应导航栏

来自分类Dev

Bootstrap-3导航栏的透明颜色

来自分类Dev

Bootstrap 3导航栏无法正确过渡

来自分类Dev

Bootstrap 3复杂的导航栏-顽皮

来自分类Dev

在Bootstrap 3导航栏上方放置横幅?

来自分类Dev

Bootstrap 3导航栏未完全折叠

来自分类Dev

如何使Bootstrap 3导航栏不包裹

来自分类Dev

Twitter的Bootstrap 3导航栏的样式

来自分类Dev

使用Twitter Bootstrap 3修复了导航栏

来自分类Dev

Bootstrap 3导航栏无法正确过渡

来自分类Dev

Bootstrap 3:导航栏未全宽

来自分类Dev

Bootstrap 3导航栏崩溃不扩展

来自分类Dev

Bootstrap3导航栏未关闭

来自分类Dev

Bootstrap 3复杂的导航栏-恶作剧

来自分类Dev

Bootstrap 3下拉导航栏

来自分类Dev

Bootstrap 3垂直导航栏响应

来自分类Dev

Bootstrap 3:导航栏崩溃但未扩展

来自分类Dev

在Bootstrap 3中,如何修复导航栏?

来自分类Dev

导航栏Bootstrap 3上方的品牌