引导3菜单：降不降，无自动崩溃

Question

我使用Opencart的3，引导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：

{% if categories %} 
    <div class="container"> 
     <nav id="menu" class="navbar"> 
      <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span> 
       <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" 
         data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> 
      </div> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Trang chủ</a></li> 

        <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> 

        <li><a href="#">Dịch vụ</a></li> 
        <li><a href="#">Tư vấn</a></li> 
        <li><a href="#">Công nghệ</a></li> 
        <li><a href="#">Tin tức</a></li> 
        <li><a href="#">Giới thiệu</a></li> 
        <li><a href="#">Tuyển dụng</a></li> 
        <li><a href="{{ contact }}">Liên hệ</a></li> 

        {#{% for category in categories %}#} 
         {#{% if category.children %}#} 
          {#<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle"#} 
                {#data-toggle="dropdown">{{ category.name }}</a>#} 
           {#<div class="dropdown-menu">#} 
            {#<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length/category.column|round(1, 'ceil')) %}#} 
              {#<ul class="list-unstyled">#} 
               {#{% for child in children %}#} 
                {#<li><a href="{{ child.href }}">{{ child.name }}</a></li>#} 
               {#{% endfor %}#} 
              {#</ul>#} 
             {#{% endfor %}</div>#} 
            {#<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a>#} 
           {#</div>#} 
          {#</li>#} 
         {#{% else %}#} 
          {#<li><a href="{{ category.href }}">{{ category.name }}</a></li>#} 
         {#{% endif %}#} 
        {#{% endfor %}#} 



       </ul> 
      </div> 
     </nav> 
    </div> 
{% endif %} 

菜单不能自动折叠，并显示不正确。

如何修复菜单？

Answer 1

要解决的下拉菜单代替：

<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> 

有了：

<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：

<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> 

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

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp