語義UI邊欄將元素推到屏幕寬度之外

Question

我不確定我是否做錯了什麼，或者如果這是預期的結果，但我使用的是語義UI的邊欄，並且它將所有內容推送到最大屏幕寬度之後。我在這裏錯過了什麼嗎？

<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

如果你不想要的內容「推」爲Semantic UI sidebars你應該使用它的.overlay類 - relevant demos

像類顧名思義，它將覆蓋邊欄而不是推送內容。

將overlay類添加到<div class="ui left vertical menu visible thin attached inverted sidebar">元素。

JSfiddle