语义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