Twitter bootstrap 引导3菜单：不下拉，不自动折叠

我使用的是OpenCart 3，Bootstrap 3。关注这些方面：

<li><a href="#">Sản phẩm</a>
    {% for category in categories %}
        <ul class="list-unstyled dropdown">
            <a href="{{ category.href }}">{{ category.name }}</a>
        </ul>
    {% endfor %}
</li>

文件menu.twig的完整内容：

菜单无法自动折叠，并且显示不正确。

---

如何修复菜单？

修复下拉菜单替换：

<li><a href="#">Sản phẩm</a>
  {% for category in categories %}
  <ul class="list-unstyled dropdown">
    <a href="{{ category.href }}">{{ category.name }}</a>
  </ul>
 {% endfor %}
</li>

与：

它不会因为你的折叠代码看起来错误而折叠。 您必须将导航栏标题类div替换为：

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

检查文档。向下滚动至底部以折叠导航栏

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sản phẩm
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
  {% for category in categories %}
    <li><a href="{{ category.href }}">{{ category.name }}</a></li>
    {% endfor %}
  </ul>
</li>

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>