Javascript 使用侧边栏阻止语义UI溢出内容

我正在使用页面上的语义UI侧栏进行导航。默认情况下，我想让它可见，如果用户愿意，可以选择关闭它。问题是，通过默认打开侧边栏，我的页面内容被推离屏幕并溢出，从而部分页面被切断。在文档中没有看到任何关于使页面内容符合可用宽度而不是被推离屏幕的内容

$（'.toggler'）。在（'click'，function（）上{
$（'.ui.sidebar'）.sidebar（'toggle'）；
});

语义用户界面边栏测试
标题
标题
标题
弗斯特
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
1.
2.
3.
4.
看一看。我认为你有两个选择：

使用

使用
overlay
css类：

您可以保持所有其他代码不变，只需更改侧栏的初始化方式

// Initialize the sidebar before it's used
$('.ui.sidebar').sidebar({
    // Overlay will mean the sidebar sits on top of your content
    transition: 'overlay'
});

// Do the toggling
$('.toggler').on('click', function() {
    $('.ui.sidebar').sidebar('toggle');
});

解决此问题的另一种方法是添加几个填充物：


.pushable>.ui.fixed.menu{
左侧填充：260px；
}
.pushable>.ui.main.container{
左侧填充：260px；
填充顶部：40px；
}

标志/公司名称
内容
在很远的地方，在“山脉”这个词的后面，在远离伏卡里亚语和辅音的国家，住着盲文。他们分别生活在Bookmarksgrove，就在语义学的海岸，一个巨大的语言海洋。一条名为杜登的小河从他们的住处流过，为他们提供了必要的regelialia。这是一个天堂般的国家，句子中烤过的部分会飞进你的嘴里。即使是全能的指点也无法控制盲文——这几乎是一种非正统的生活——然而，有一天，一小行名为Lorem Ipsum的盲文决定前往遥远的语法世界。大牛津大学建议她不要这样做，因为那里有成千上万个糟糕的逗号、粗野的问号和迂回的Semikoli，但这条小小的盲文没有听进去。她把她的七个versalia打包，把她的首字母放在腰带上，然后上路了。当她到达Italic山脉的第一座山时，她最后一次看到了家乡Bookmarksgrove的天际线，字母村的标题和她自己道路的副线Line Lane。可怜的是，她脸上掠过了一个反唇相讥的问题

我在语义UI React上花了时间讨论同一个问题

据我所知，语义用户界面的边栏组件仅用于在移动设备上显示一个临时菜单栏以进行导航。它不是设计为固定的仪表板菜单

我试过效果“叠加”“缩小”“推”。。所有这些都没有正确显示我的组件，我不想深入讨论CSS的细节，比如“transform:translate3d”属性

仪表板也是如此；
我只是简单地编写了一个网格，然后在左侧垂直放置一个菜单组件，然后在右侧放置内容

现在我正在为手机尺寸准备一个不同的布局，它将使用语义UI边栏
使用“覆盖”功能。
这在初始化和第一次切换时效果很好，但是显示侧边栏看起来很糟糕。有什么建议吗？这是可行的，但仅供参考-这在文档中写在哪里？我到处都找不到。