如何使用Bootstrap修复Meteor 0.9中的loginButtons？

Question

将以下内容添加到Meteor 0.9项目后：

standard-app-packages  1.0.0  Include a standard set of Meteor packages in yo...
bootstrap              1.0.0  Front-end framework from Twitter
iron:router            0.9.1  Routing specifically designed for Meteor
accounts-ui            1.0.0  Simple templates to add login widgets to an app
accounts-password      1.0.0  Password support for accounts

并尝试显示{{>loginButtons}}：

<template name="header">
    <header class="navbar">
        <div class="navbar-inner">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </a>
            <a class="brand" href="{{pathFor 'postsList'}}">Posts</a> 
            <div class="nav-collapse collapse">
                <ul class="nav pull-right">
                    <li>{{>loginButtons}}</li> 
                </ul>
            </div> 
        </div>
    </header>
</template>

用户名/密码对话框部分显示在浏览器之外（在Safari / Firefox / Chrome中也是如此）：

我该如何解决？

Answer 1

您只需使用

即可

{{> loginButtons align="right"}}

使它看起来像这样：

Answer 2

您可以指定右侧或左侧之间的位置。

{{> loginButtons align="right"}}

但是在您的情况下，您必须修复UI，因为登录表单与导航栏的对齐方式不对。

修复是：

.navbar .nav {
        top:9px;
}