Framework7：拆分视图降级到标签栏？ （组合示例）

Question

完全是Framework7的新功能，尚未完全掌握布局。正在试图结合提供的两个示例，即分解视图降级到面板：framework7.io/examples/split-view-panel/和标签栏布局framework7.io/examples/tab-bar/，以便iPad等可以获得拆分面板视图，而iPhones获得标签栏。 （即显示/隐藏使用相同的CSS查询，显示/隐藏侧边栏标签栏）

我从分割面板视图开始，通过.toolbar添加从标签栏应用自定义CSS和加入.tabs到.views div。将.tab .active添加到.view-main div。并复制并粘贴工具栏代码：

<div class="toolbar tabbar tabbar-labels"> 
    <div class="toolbar-inner"> 
    <a href="#view-1" class="tab-link active"> <i class="icon tabbar-demo-icon-1"></i><span class="tabbar-label">Information</span></a><a href="#view-2" class="tab-link"><i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label">Inbox</span></a> 
    <a href="#view-3" class="tab-link"> <i class="icon tabbar-demo-icon-3"><span class="badge bg-red">4</span></i><span class="tabbar-label">Upload</span></a> 
    <a href="#view-4" class="tab-link"> <i class="icon tabbar-demo-icon-4"></i><span class="tabbar-label">Photos</span></a> 
    </div> 
</div> 

该工具栏添加到DOM，但它不可见。 Jsfiddle：https://jsfiddle.net/t6295yqs/

Mu in在开发工具我无法真正理解从生成的输出为什么它没有显示，这不是z-index或一般可见性的问题......任何指针如何让这个工作将深表赞赏

（注意，没有添加的CSS来隐藏和显示标签栏的小提琴尽管这应该很容易）

Answer 1

我通过移动标签的条形码解决了这个问题

<div class="panel-overlay"></div> 

还向标签栏div添加了一个类 - .m-hide。

@media (min-width: 769px) { 
    .xs-show { 
    display:none; 
    } 
} 

https://jsfiddle.net/t6295yqs/2/