Semantic UI Sidebar pushes elements outside of screen width

问题

I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing something here?

<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/

回答1:

If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos

Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.

Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.

JSfiddle

回答2:

I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar

.sidebar.visible + .pusher{
    margin-right: 58px;
}

来源：https://stackoverflow.com/questions/44666515/semantic-ui-sidebar-pushes-elements-outside-of-screen-width