如何在 octobercms 中使用 popper答案

【问题标题】：How to use popper in octobercms如何在 octobercms 中使用 popper
【发布时间】：2018-07-12 16:12:34
【问题描述】：

我是新来的，有点像初学者，所以我希望我的问题不会太愚蠢！我目前正在使用十月 CMS 开发一个网站，而我使用的主题没有集成 popper.js。

我想给我的导航栏（使用 Bootstrap）一些不错的下拉菜单，但我不能让它工作。浏览网络后，似乎我需要popper.js 才能使其工作。

我的问题是这个：

你们知道将popper.js 整合到 10 月的方法吗？

我需要创建一个部分吗？

到目前为止，我已尝试将链接复制/粘贴到 <body> 底部的库，但它似乎不起作用。

提前致谢！干杯

m3ssy

编辑：

对不起，伙计们，我周末离开了..但非常感谢您的回答。我已经尝试了所有方法，但没有任何效果！

这是导航栏：

<nav id="nav" class="navbar navbar-nav">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="{{ 'home'|page }}">Home</a></li>
        <li class="nav-item dropdown"><a href="{{ 'dirigent'|page }}"     id="navbarDropdown" class="{% if this.page.id == 'dirigent' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Dirigent</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Something</a>
          </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'chor'|page }}" class="{% if this.page.id == 'chor' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Chor</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'media'|page }}" class="{% if this.page.id == 'media' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Media</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item"><a href="{{ 'termine'|page }}" class="{% if this.page.id == 'termine' %}active{% endif %}">Termine</a></li>
</ul>

这里是 10 月链接脚本的代码：

<script src="{{ ['assets/js/jquery.min.js','assets/js/jquery.scrollex.min.js', 'assets/js/jquery.scrolly.min.js', 'assets/js/skel.min.js', 'assets/js/util.js', 'assets/js/main.js', 'assets/js/popper.min.js', 'assets/js/bootstrap.bundle.min.js'] |theme}}"></script>

我还必须准确地说我是在本地主机上开发的！

谢谢各位！干杯

【问题讨论】：

提供您所拥有的代码以及任何错误消息和/或当前行为的描述会很有帮助。
popper.js 是“内置”到 Bootstrap 中的。我的第一个建议是使用包含它的 Bootstrap 构建。您使用的是 BS v3 还是 v4？
感谢您的回答！
@zanerock：代码会很长，我必须编辑很多。我不知道如何为 10 月创建一个 jsfiddle。
@fnostro：我正在使用 bootstrap v4，但文档仍然说我必须在 body 的末尾集成脚本以用于 popper。

标签： twitter-bootstrap octobercms popper.js

【解决方案1】：

这是 BS4 的“包含列表”：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

另外，根据 BS4 文档：

下拉菜单建立在第三方库 Popper.js 之上，该库提供动态定位和视口检测。务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用 bootstrap.bundle.min.js / bootstrap.bundle.js 其中包含 Popper.js。 Popper.js 不用于在导航栏中定位下拉菜单虽然不需要动态定位。

所以你可以选择使用：

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

有关如何合并这些文件的示例，请参阅BS4 Starter Template。

【讨论】：