語義UI：在平板電腦和移動設備視圖中折疊垂直菜單（邊欄）

Question

我正在建立基於語義UI的HTML + CSS設計，通過使用stackable類，我幾乎可以使任何元素做出響應。

但是，我用作可見側欄的左側垂直菜單在平板電腦和移動設備視圖中不會折疊。

我需要的結果與“語義UI文檔”頁面完全一樣：側邊欄在台式機和橫向平板電腦中可見，而在縱向平板電腦和移動設備中隱藏但可切換。

這是我的代碼：

<div class="ui left vertical menu collapsible main sidebar visible desktop only">
    <div class="transparent-bg">
        <div class="ui center aligned basic sideheader segment">
            <h2 class="ui header">Dashboard</h2>
        </div>
        <a class="bold item">
            <i class="building outline icon"></i>Add Item
        </a>
        <a class="active item">
          Item 1
        </a>
        <a class="item">
          Item 2
        </a>
        <a class="item">
          Item 3
        </a>
    </div>
</div>

關於如何實現此目標的任何想法嗎？ 官方文檔頁面上沒有文檔。

非常感謝！

Answer 1

我不使用語義UI，但是您是否檢查過https://semantic-ui.com/modules/sidebar.html ？