我已经构建了一个包含顶部菜单和侧面菜单的网页，但现在ui segments扩展到页面的一侧。是否需要通过java脚本初始化菜单？或者我用CSS手动移动片段？任何帮助表示赞赏。
最小例子：* https://jsfiddle.net/Lk6y7msh/
<html>
<head>
<title>Test Bed</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</head>
<body>
<div class="ui vertical inverted left visible sidebar menu">
<img src="/static/logo.png" style="display: block;margin: 0 auto;">
<div class="ui divider"></div>
<div class="header icon">
<h3>
<a class="item" href="#some">Menu Item
<i class="check icon"></i>
</a>
<a class="item" href="#some">Menu Item
<i class="check icon"></i>
</a>
</h3>
</div>
</div>
<div class="pusher">
<div class="ui inverted segment">
<div class="ui inverted secondary pointing menu">
<a class="active item" href="/test">Test</a>
<a class="item" href="/setting">Settings</a>
<a class="item" href="/service">Services</a>
<a class="item" href="/LogReader">LogReader</a>
<a class="item" href="/ErrorPage">ErrorPage</a>
</div>
</div>
<div class="ui segment">
<table class="ui celled table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">James</td>
<td data-label="Age">24</td>
<td data-label="Job">Engineer</td>
</tr>
<tr>
<td data-label="Name">Jill</td>
<td data-label="Age">26</td>
<td data-label="Job">Engineer</td>
</tr>
<tr>
<td data-label="Name">Elyse</td>
<td data-label="Age">24</td>
<td data-label="Job">Designer</td>
</tr>
<tr>
<td data-label="Name">Me</td>
<td data-label="Age">24</td>
<td data-label="Job">creates the look, layout, and features of a website. The job involves understanding both graphic design and computer programming. ... They work with development teams or managers for keeping the site up-to-date and prioritizing needs, among
other tasks.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>更改您抵消内容的方式。
目前，您在内容上使用transform:translate将其偏移到右侧，因此不会隐藏在侧边栏后面。在这样做的过程中，浏览器按原样获取整个元素，保持它的渲染尺寸并逐字地移动它，因此它会从视口右侧流出。
相反，使用更简单的规则来抵消您的内容：margin-left，并且元素适应任何可用空间。
展望未来，您可能希望应用更具响应性的设计（针对移动设备），尤其是关于表格的外观。
对于.pusher：
去掉：
-webkit-transform: translate3d(260px,0,0);
transform: translate3d(260px,0,0);
加：
margin-left: 260px;
在任何情况下，显然如果侧边栏改变尺寸或被切换掉，那么你将不得不使用JS来改变内容偏移。