我正在尝试制作一个带有侧边导航栏的页面。我正在使用语义用户界面，对它来说有点新，并使用它的网格。问题是页面的其余内容在 sidenav 下流动并隐藏在它下面，我不知道如何阻止这种行为。
我尝试将 sidenav 放入 4 宽度的列中，并将页面的其余部分放入 12 宽度，我为 sidenav 尝试了不同的参数/类，但我不能让它停止流入它。这里的垂直菜单有'left fixed'选项
我试过不修复它，尝试添加一个可见的侧边栏。从文档来看，内容似乎不应该在它下面流动，不确定我做错了什么。
这是我的代码:
<html >
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="icon" type="image/png" href="images/favicon.ico">
</head>
<body>
<div class="ui inverted teal menu">
<div class="right menu">
<a class="ui item">Sign In</a>
<a class="ui item">Login</a>
<a class="ui item">Logout</a>
</div>
</div>
<div class="ui left fixed vertical menu teal inverted">
<div class="header item"><a href='/'>MyApp</a></div>
<% for(var cat in allCats) { %>
<div class="item">
<a class='header' href="/<%= cat %>" ><%= cat %></a>
<div class="menu">
<ul>
<% for(var subCat in cat) { %>
<li><a class="item" href="cat/subCat" ><%= subCat %></a></li>
<% } %>
</ul>
</div>
</div>
<% } %>
<a class="item">About Us</a>
</div>
<h1 class='title-format'>Welcome to MyApp!!!</h1>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>
</body>
</html>
这里，当我缩小窗口时，简单的 h1 会显示“欢迎使用我的应用程序”，它位于我的侧边导航栏下方。
谢谢
最佳答案
利用类 stackable、computer reversed 和 tablet reversed 我能够得到预期的结果。请检查下面的工作示例。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="icon" type="image/png" href="images/favicon.ico">
<div class="ui inverted teal menu">
<div class="right menu">
<a class="ui item">Sign In</a>
<a class="ui item">Login</a>
<a class="ui item">Logout</a>
</div>
</div>
<div class="ui grid stackable computer reversed tablet reversed">
<div class="thirteen wide column">
<h1 class='title-format'>Welcome to MyApp!!!</h1>
</div>
<div class="three wide column">
<div class="ui left vertical menu teal inverted">
<div class="header item">
<a href='/'>MyApp</a>
</div>
<% for(var cat in allCats) { %>
<div class="item">
<a class='header' href="/<%= cat %>">
<%= cat %>
</a>
<div class="menu">
<ul>
<% for(var subCat in cat) { %>
<li>
<a class="item" href="cat/subCat">
<%= subCat %>
</a>
</li>
<% } %>
</ul>
</div>
</div>
<% } %>
<a class="item">About Us</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>关于javascript - 如何阻止页面内容流入SideNav Semantic-ui，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51394574/