Bootstrap 3导航栏不再起作用

Question

好吧...昨天成功了，明天没了...是真的！

在控制台上，它显示以下消息：

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

Answer 1

代替您在<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> 。

Bootstrap 3导航栏不再起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-11 11:49:07

Bootstrap 3导航栏不再起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-11 11:49:07

解决方案1
1 已采纳 2017-08-11 11:49:07