我正在为网站创建菜单。它有2个级别。您可以点击该部分的标题,然后显示该部分的链接,而其他部分隐藏。够简单。现在网站菜单2级深度,桌面和手机上的不同堆叠
,问题是,移动的看法是完全不同的。它的工作原理相同,但这些部分首先显示为列表,并且部分链接(以当前显示的那一部分为准)显示在下方。像这样:
我已经成功地做到这一点像,使用引导程序(条纹不必要的代码):
<div class="row">
<div class="col-xs-6 col-lg-12">
Section 1 title
</div>
<div class="col-lg-12 hidden-xs">
<ul>
<li><a href="">Link in section 1</a></li>
...
</ul>
</div>
<div class="col-xs-6 col-lg-12">
Section 2 title
</div>
<div class="col-lg-12 hidden-xs">
<ul>
<li><a href="">Link in section 2</a></li>
...
</ul>
</div>
</div>
<div class="row visible-xs">
<div class="col-xs-12">
<ul>
<li><a href="">Link in section 1</a></li>
...
</ul>
</div>
<div class="col-xs-12">
<ul>
<li><a href="">Link in section 2</a></li>
...
</ul>
</div>
</div>
它的工作原理。但我想避免必须两次创建小节。此外,章节标题不会显示为列表,而是作为网格中的列“被骗”。
我可以使用Flexbox的? –