如何使用引导带4和角7在Navbar中制作多级下拉菜单

Question

我想要创建多级下拉元使用引导4和角7。

我可以使用引导的官方文档在导航栏中创建简单的下拉列表。

但是当我尝试创建多级下拉时，它是行不通的。

Bootstrap 4: Multilevel Dropdown Inside Navigation

使用上面的链接，我可以找到一个多级下拉的解决方案。

但是它使用某种jQuery代码来正常工作。

是否有任何内置的方法，使多级下拉使用引导？

在引导程序的正式文档中，我没有看到任何与此相关的内容。

我不知道我是否遗漏了代码中的任何脚本或css。

"styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "src/styles.css"

                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
                            "node_modules/popper.js/dist/popper.min.js"
                        ],

下面是我用于引导css和js的angular.json部分。

任何一种解决办法都是值得感激的。

​

​

我需要这样的结果

Answer 1

试着用这个：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

参见参考资料：https://bootsnipp.com/snippets/kM4Q