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/