Bootstrap 3 Menü: Hat Drop-down nicht, kein Auto Zusammenbruch

Question

ich verwende OpenCart 3, Bootstrap 3. Fokus auf diesen Linien:

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

Vollständiger Inhalt der Datei 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 %} 

Menü kann nicht automatisch Zusammenbruch und falsch angezeigt.

Wie Menü beheben?

Answer 1

das Dropdown-Menü ersetzen zu beheben:

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

mit:

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

Es nicht kollabiert Ursache Ihr Zusammenbruch Code sieht falsch. Sie haben Ihre "navbar-header" class div ersetzen mit:

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

Überprüfen Sie die Dokumentation. Scrollen Sie nach unten zu "Collapsing the Navigation Bar".

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