javascript - float 侧边栏语义 Ui

Question

这是我的模板

编辑:简化了代码。因此，当代码原样时，不会显示侧边栏。但是当我删除“侧边栏”时，会显示垂直菜单。

<template name="pageTemplate">
{{#if currentUser}}
    <div class="ui vertical menu inverted blue floating sidebar active">
        <div class="menu">
            <a class="item">
                <i class="home icon"></i>
                Home
            </a>
            <a class="item">
                <i class="disk outline icon"></i>
                Devices
            </a>
            <a class="item">
                <i class="area chart  icon"></i>
                Statistics
            </a>
        </div>
    </div>

{{/if}}
{{>yield}}
<div class="ui inverted footer red segment">
    Sixdee Technologies 2015 &copy;. All Rights Reserved
</div>

我是 Meteor 和 Semantic UI 的新手。

我正在努力获得一个 float 侧边栏，它将使用“菜单”按钮触发。我无法显示侧边栏。但是，如果我删除类侧边栏，我可以看到正在显示垂直菜单。所以我认为类侧边栏有问题。

但即使在这种情况下，当我在 Google Chrome 中打开开发者模式并将鼠标悬停在侧边栏代码上时，页面的某些部分也会突出显示。这意味着它正在创建，但未显示。

请帮帮我，我错过了一些东西。这些是我已经安装的软件包。

semantic:ui                      2.2.1  Official Semantic UI    Integration for Meteor
semantic:ui-css                  2.1.2  Semantic UI - CSS Release of Semantic UI
semantic:ui-sidebar              2.1.7  Semantic UI - Sidebar: Single component release

如果需要的话我也可以分享我的CSS。

谢谢。

Answer 1

嗨，Sanjith，我是 Avelx，

我无法运行 Github 示例，因为我没有安装 MeteorJS。但是我相信在将您的示例与您正在使用的实时版本进行比较后，侧边栏没有使用正确的类。不要忘记我的讲座是针对旧版本的 Semantic。请改用这些类...

class="ui 简单侧边栏倒立垂直菜单左侧揭开可见 "

看看这是否有效，并且不要忘记像这样使用官方网页上的开发人员工具...

google chrome developer tools

这里是网站本身的一些文档，其中包含用于进一步说明的类定义。