Question

我正在尝试制作一个带有侧面导航栏的页面。我正在使用语义UI，这是它的新特性，并使用了它的网格。事实是，其余页面内容在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会显示“欢迎使用我的应用程序”。

谢谢

Answer 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>

Answer 2

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

而且，为了使列的宽度固定，恐怕您无法（不确定）使用语义UI默认类，我相信您必须使用自定义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>

Answer 3

事实证明这非常简单，根本不需要使用网格系统，只需进行一些CSS修改即可：

#sidenav {
    min-width: 200px;
}

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

做到了！

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

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

3 个答案: