Javascript bootstrap3中的边栏在Meteor.js中不起作用_Javascript_Twitter Bootstrap_Meteor

Javascript bootstrap3中的边栏在Meteor.js中不起作用

javascript twitter-bootstrap meteor

Javascript bootstrap3中的边栏在Meteor.js中不起作用,javascript,twitter-bootstrap,meteor,Javascript,Twitter Bootstrap,Meteor,以下是我使用的html代码： <body> <div id="wrapper">  <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#">

以下是我使用的html代码：

<body>
 <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>

           <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                    <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

我从中复制了上面的代码

以下是meteor list命令的输出：

$ meteor list
accounts-facebook  1.0.4  Login service for Facebook accounts
accounts-ui        1.1.5  Simple templates to add login widgets to an app
autopublish        1.0.3  Publish the entire database to all clients
insecure           1.0.3  Allow all database writes by default
meteor-platform    1.2.2  Include a standard set of Meteor packages in your app
twbs:bootstrap     3.3.5  The most popular front-end framework for developing...

有人知道为什么引导的边栏在Meteor中不起作用吗

不过，这项计划确实奏效了

您需要添加CSS才能正确显示，还需要一个jQuery函数来打开和关闭侧边栏。参见工作示例

$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});
body，
html{
身高：100%；
溢出x：隐藏；
}
/*!
*启动引导-简单的侧栏HTML模板(http://startbootstrap.com)
*根据Apache许可证v2.0许可的代码。
*有关详细信息，请参阅http://www.apache.org/licenses/LICENSE-2.0.
*/
/*切换样式*/
#包装纸{
左侧填充：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
z指数：1000；
位置：固定；
左：250px；
宽度：0；
身高：100%；
左边距：-250px；
溢出x：隐藏；
背景：#000；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}
#页面内容包装器{
宽度：100%；
位置：绝对位置；
填充：15px；
}
#wrapper.toggled#页面内容包装器{
位置：绝对位置；
右边距：-250px；
}
/*边栏样式*/
.侧边栏导航{
位置：绝对位置；
排名：0；
宽度：250px；
保证金：0；
填充：0；
列表样式：无；
}
.侧边栏导航李{
文本缩进：20px；
线高：40px；
}
.侧边栏导航李a{
显示：块；
文字装饰：无；
颜色：#999999；
}
.侧边栏导航李a：悬停{
文字装饰：无；
颜色：#fff；
背景：rgba（255，255，255，0.2）；
}
.侧边栏导航李a：激活，
.侧边栏导航李a：焦点{
文字装饰：无；
}
.sidebar nav>.sidebar品牌{
高度：65px；
字号：18px；
线高：60px；
}
.sidebar nav>.sidebar品牌a{
颜色：#999999；
}
.sidebar nav>.sidebar品牌a:悬停{
颜色：#fff；
背景：无；
}
@介质（最小宽度：768px）{
#包装纸{
左侧填充：250px；
}
#包装器。切换{
左侧填充：0；
}
#边栏包装{
宽度：250px；
}
#wrapper.toggled#侧栏包装器{
宽度：0；
}
#页面内容包装器{
填充：20px；
位置：相对位置；
}
#wrapper.toggled#页面内容包装器{
位置：相对位置；
右边距：0；
}
}



















简单边栏
此模板具有响应菜单切换系统。菜单在较小屏幕上显示为折叠，在较大屏幕上显示为非折叠。使用下面的按钮切换时，菜单将出现/消失。在小屏幕上
页面内容将被推离画布
确保所有页面内容都在#页面内容包装中

您是否正在包列表中加载jQuery？这可能会有帮助：是的。刚刚通过：meteor add jquery添加了jquery。仍然没有看到[sidebar][。