セマンティックUIサイドバーが要素を画面幅の外に押し出す

Question

私が何か間違っているかどうか、またはこれが意図した結果であるかどうかはわかりませんが、セマンティックUIのサイドバーを使用しています。私はここに何かを逃していますかクラス名が示唆同様relevant demos

を、それがオーバーレイされます - Semantic UI sidebarsあなたがそれに.overlayクラスを使用する必要がありますため

<div class="ui bottom attached segment pushable"> 
    <div class="ui left vertical menu visible thin attached inverted sidebar"> 
    <a class="item"> 
      Item 1 
     </a> 
    <a class="item"> 
      Item 2 
     </a> 
    <a class="item"> 
      Item 3 
     </a> 
    </div> 
    <div class="pusher"> 
    <div id="search-bar"> 
     <div class="ui fluid action input"> 
     <input placeholder="Search.."> 
     <div class="ui green button"> Search </div> 
     </div> 
    </div> 
    <h3 class="ui block header"> 
     Item 
    </h3> 
    </div> 
</div> 

https://jsfiddle.net/kour6d1x/

Answer 1

あなたがコンテンツをしたくない場合は、「プッシュ」コンテンツをそれに沿って押すのではなく、サイドバーに表示されます。

要素にoverlayクラスを追加します。

JSfiddle