语义UI边栏将元素推到屏幕宽度之外 [英] Semantic UI Sidebar pushes elements outside of screen width

问题描述

我不确定我是否做错了什么，或者这是否是预期的结果，但我使用的是语义UI的侧边栏，它会将所有内容推送到最大屏幕宽度。

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/

推荐答案

如果您不想要内容推送为语义UI侧边栏，您应该使用。 overlay 类 - 相关演示

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.

添加叠加类到< div class =ui左侧垂直菜单可见薄连接倒转侧栏> 元素。

JSfiddle

这篇关于语义UI边栏将元素推到屏幕宽度之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！