如何阻止页面内容流入 SideNav Semantic-ui答案

【问题标题】：How to stop page content from flowing into SideNav Semantic-ui如何阻止页面内容流入 SideNav Semantic-ui
【发布时间】：2018-07-18 05:59:59
【问题描述】：

我正在尝试制作带有侧面导航栏的页面。我正在使用语义用户界面，对它来说有点新并使用它的网格。问题是页面内容的其余部分在sidenav 下流动并隐藏在它下面，我不知道如何阻止这种行为。

我尝试将 sidenav 放入 4 宽的列，将页面的其余部分放入 12 宽，我尝试了 sidenav 的不同参数/类，但我无法让它停止流入。这里的垂直菜单有“左固定”选项

我试过没有修复它，尝试添加一个可见的侧边栏。从文档来看，内容似乎不应该在它下面流动，不确定我做错了什么。

这是我的代码：

<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 会在我的侧导航栏下方显示“欢迎使用我的应用程序”。

谢谢

【问题讨论】：

标签： javascript html css semantic-ui

【解决方案1】：

使用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>

【讨论】：

嗨，Girish，谢谢，但这对我不起作用，我已经尝试过了，但由于某种原因，它仍然在侧面导航栏下方，当它变小时。
在小屏幕中删除 position:fixed
请检查上面编辑的代码 sn-p 现在它包含 stackable 类，它将在较小的屏幕中堆叠列，并从侧边栏中删除 fixed
抱歉，这不适用于所有页面内容，只是堆叠在 sidenav 下
现在请检查上面的sn-p，希望这是你所期待的。

【解决方案2】：

您需要使用 Grid 结构，请参阅文档：https://semantic-ui.com/collections/grid.html#/overview

为了让你的列有固定的宽度，恐怕你不能用语义用户界面默认类来做到这一点（不确定），我相信你必须使用自定义 CSS 类来定义固定宽度。

HTML：

<div class="ui grid">
   <div class="sixteen wide column"> ... </div>
   <div class="custom-sidebar wide column"> ... </div>
   <div class="custom-content wide column"> ... </div>
</div>

CSS：

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

<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 grid">
    <div class="sixteen wide column">
      <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>
    <div class="custom-sidebar wide column">   
    <div class="ui left fixed vertical menu teal inverted">
        <div class="header item"><a href='/'>MyApp</a></div>
            <div class="item">
                    <a class='header' href="" >cat</a>
                    <div class="menu">
                    <ul>
                                <li><a class="item" href="cat/subCat" >subcat</a></li>
                    </ul>
                    </div>
            </div>
        <a class="item">About Us</a>
    </div>
    </div>
    <div class="custom-content wide column">
    <h1 class='title-format'>Welcome to MyApp!!!</h1>
    
    </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>


    </body>
</html>

【讨论】：

嗨 Girish，我之前用网格做过，但没有用，但是使用 25% 并将网格放在顶级货车之前似乎也可以，但是 25 % 让侧边栏非常难看，页面最大化时太大，最小化时太小，还有其他方法吗？？？
改为max-width: 25% !important;。
有没有办法让它完全符合没有 25% 的大小？？？我应该尝试使用像素值还是会反应迟钝/不好？？？或者使用最大和最小宽度可能？？？
你可以使用doubling类（加倍网格将使每个设备跳转的列宽加倍。）-semantic-ui.com/collections/grid.html#doubling
我尝试向 sidenav 添加最小宽度，但页面内容再次渗入其中。如果我只留下最大宽度，那么 sidenav 就会变得非常小。我只是希望它保持固定大小，并且只为了缩小页面内容

【解决方案3】：

原来很简单，根本不需要使用网格系统，只是一些css修改：

#sidenav {
    min-width: 200px;
}

#mainViewArea {
    margin-left: 200px;
    padding: 20px;
}

做到了！！！

感谢那些提供帮助的人，它使我朝着正确的方向前进，希望这对某人有所帮助。

【讨论】：