kmm*_*kmm 5 javascript css user-interface semantic-ui
我在我的页面上使用语义 UI 侧边栏进行导航。默认情况下，我想让它可见，并且用户可以选择关闭它（如果他们愿意）。问题是，通过默认打开侧边栏，我的页面内容被推离屏幕并溢出，因此页面的一部分被切断。在文档中没有看到任何关于使页面内容符合可用宽度而不是被推离屏幕的内容。
$('.toggler').on('click', function() {
$('.ui.sidebar').sidebar('toggle');
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI Sidebar test</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
</head>
<body>
<div class="ui left sidebar inverted vertical menu visible pushable">
<a href="#" class="item">Sidebar Link</a>
</div>
<div class="ui pusher">
<div class="ui menu">
<a class="item toggler">
Toggle
</a>
<div class="item header">
Semantic UI
</div>
<div class="menu right">
<a href="#" class="item">Test</a>
</div>
</div>
<div class="ui segment">
<table class="ui celled table">
<thead>
<tr><th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr>
<td>
<div class="ui ribbon label">First</div>
</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr><th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr></tfoot>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
</body>
</html>查看侧边栏文档的示例部分。我认为你有两个选择：
使用缩小内容<div class="ui left sidebar inverted vertical menu visible scale down">
overlay使用css 类使侧边栏显示在内容上：<div class="ui left sidebar inverted vertical menu visible overlay">