Bootstrap 3 菜单:没有 drop-down,没有自动折叠
Bootstrap 3 menu: Doesn't drop-down, no auto collapse
我正在使用 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:
{% 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 %}
菜单无法自动折叠,显示不正确。
如何修复菜单?
要修复下拉菜单替换:
<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>
它没有崩溃,因为您的崩溃代码看起来不对。
您必须将 "navbar-header" class 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>
检查文档。向下滚动到底部 "Collapsing The Navigation Bar"。
我正在使用 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:
{% 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 %}
菜单无法自动折叠,显示不正确。
如何修复菜单?
要修复下拉菜单替换:
<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>
它没有崩溃,因为您的崩溃代码看起来不对。 您必须将 "navbar-header" class 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>
检查文档。向下滚动到底部 "Collapsing The Navigation Bar"。