2017-10-19 28 views
0

J'utilise OpenCart 3, Bootstrap 3. Mettre l'accent sur ces lignes:Bootstrap menu 3: Ne déroulant pas, aucun effondrement automatique

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

contenu intégral du fichier 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 %} 

Le menu ne peut pas être réduit automatiquement et ne s'affiche pas correctement. enter image description here

Comment réparer les menus?

Répondre

1

Pour fixer le menu déroulant remplacer:

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

Avec:

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

Il ne tombe pas la cause de votre code d'effondrement semble erroné. Vous devez remplacer votre div class "navbar-tête" avec:

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

Consultez la documentation. Faites défiler vers le bas pour "Réduire la barre de navigation".

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