meteor的帐户 – ui-bootstrap-3 {{loginButtons}}不显示
安装bootstrap-3
和accounts-ui-bootstrap-3
,当使用{{ loginButtons }}
时, ui-accounts
login小部件不会出现。 取而代之的是find一个<div>
,但没有可见的小部件。
是否有额外的步骤缺less小部件显示?
添加Bootstrap 3包
mrt add bootstrap-3 mrt add accounts-ui-bootstrap-3
main.html中
<body> {{> header}} </body> <template name="header"> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">My Bootstrap 3 App</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li>{{ loginButtons }}</li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div> </template>
{{loginButtons}}的输出
<div id="login-buttons" class="login-buttons-dropdown-align-right"></div>
更新
未alignment的{{ loginButtons }}
在文档中正确alignment示例
无论谁发现这一点,并想知道为什么发生这种情况,解决scheme非常简单。 只要inputmeteor remove accounts-ui
从meteor中删除标准accounts-ui软件包。 显然,标准包会覆盖bootstrap-3样式帐户ui的CSS类。
您必须在{{loginButtons}}周围省略 LI元素。
<div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> {{loginButtons}} </ul> </div><!--/.nav-collapse -->
另外,你需要一个像accounts-facebook,accounts-password或accounts-google这样的软件包。
mrt add accounts-twitter
如果你检查元素,你可能会注意到:
#login-buttons { display: none; }
这是我的问题,但我不知道为什么它被设置为display: none
。
我也意外地安装了bootstrap
和bootstrap 3
软件包,这是打破了CSS。 我做$ meteor remove bootstrap
,现在一切正常。 愚蠢的错误,但也许会帮助别人。
由于useraccounts:bootstrap
有相同的问题useraccounts:bootstrap
包与此包冲突。
删除所有的软件包(可以通过meteor remove
或在.meteor /软件包的软件包名称前添加#
来实现),然后逐个启用软件包。 你会知道引起冲突的包。 然后使用meteor remove {packagename}
删除冲突的包
<li>{{ loginButtons }}</li>
这里的问题是你忘记使用>
“大于符号”,因此它应该是:
{{> loginButtons }}