如何使用semanui轨元素

I am trying to create a vertical left menu using semantic-ui. Something like admin menu. To make it aligned into left, I tried to use rail element provided by semantic-ui. But my content is not visible.

我正在尝试使用语义-ui创建一个垂直的左菜单。类似的管理菜单。为了使它与左边对齐，我尝试使用semanine -ui提供的rail元素。但是我的内容是不可见的。

I tried with example code provided in the site. But result is still the same. what am I missing here?

我尝试了站点中提供的示例代码。但是结果还是一样的。我错过了什么?

<body>
  <div class="ui segment">
    <div class="ui left dividing rail">
        <div class="ui segment">
            Left Rail Content
        </div>
    </div>
    <div class="ui right dividing rail">
        <div class="ui segment">
            Right Rail Content
        </div>
    </div>
    <p></p>
    <p></p>
  </div>
</body>

I saw semantic-ui documentation site also using similar approach for showing their right menu. If this is not a best approach to create admin menu, please suggest any other better way using semantic ui.

我看到semanine -ui文档站点也使用类似的方法来显示它们的右菜单。如果这不是创建管理菜单的最佳方法，请建议使用语义ui的更好方法。

2 个解决方案

#1

You need to specify size and position of an central element. For example:

您需要指定中心元素的大小和位置。例如:

<body>
  <div class="ui segment" style="left:400px;width:600px;">
    <div class="ui left dividing rail">
        <div class="ui segment">
            Left Rail Content
        </div>
    </div>
    <div class="ui right dividing rail">
        <div class="ui segment">
            Right Rail Content
        </div>
    </div>
    <p></p>
    <p></p>
  </div>
</body>

#2

You can put them in a grid container, then add a four wide column before main segment. You should also set the main segment eight wide column to make it at the center (p.s. 16 = 4 + 8 + 4).

您可以将它们放在一个网格容器中，然后在主段之前添加一个4宽的列。您还应该设置主段8宽的列，使其位于中心(p. 16 = 4 + 8 + 4)。

Run the code snippet in full page please.

请在全页中运行代码片段。

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet" />


<div class="ui grid container">
  <div class="ui four wide column">

  </div>
  <div class="ui segment eight wide column">
    <div class="ui left rail">
      <div class="ui segment">
        Left Rail Content
      </div>
    </div>
    <div class="ui right rail">
      <div class="ui segment">
        Right Rail Content
      </div>
    </div>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p>main content here..................................................</p>
    <p></p>
  </div>

  <div class="ui four wide column">

  </div>
</div>

#1