Framework7:拆分视图降级为选项卡栏？(组合示例)

Question

对Framework7来说是全新的，还没有完全掌握它的布局。我试图将提供的两个示例结合起来，即拆分视图降级为panel：framework7.io/examples/split-view-panel/与选项卡栏布局framework7.io/examples/tab-bar/，以便iPads等将获得拆分面板视图，而iPhones获得选项卡栏。(例如，使用与显示/隐藏侧边栏相同的css查询来显示/隐藏选项卡栏)

我从拆分面板视图开始，添加了标签栏应用程序中的自定义css，并在.views目录中添加了.tabs .将.tab .active添加到.view-main目录。并复制并粘贴工具栏代码：

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

在开发工具中胡闹，我真的不能从生成的输出中理解为什么它没有显示出来，这不是z索引或一般可见性的问题……任何关于如何使其正常工作的建议都将不胜感激

(注意，我还没有添加css来隐藏和显示小提琴的选项卡栏，尽管这应该很容易)

Answer 1

我解决这个问题的方法是将制表符条形码移到

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

还向选项卡栏div添加了一个类- .m-hide。

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

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