Метеорные счета-ui-bootstrap-3 {{loginButtons}} не отображаются

После установки bootstrap-3 и accounts-ui-bootstrap-3 виджет входа ui-accounts не появился, когда используется {{ loginButtons }}. Вместо этого на его месте находится <div>, но виджет не виден.

Существуют ли дополнительные действия, которые отсутствуют для отображения виджета?

Добавление пакетов 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>

Update

Misaligned {{ loginButtons }}

Правильно выровненный пример в документах

Ответ 1

Для тех, кто находит это и задается вопросом, почему это происходит, решение довольно простое. Просто удалите стандартную учетную запись - пакет ui из метеорита, набрав meteor remove accounts-ui. По-видимому, стандартный пакет переопределяет классы CSS бутстрапов-3-стилевых учетных записей ui.

Ответ 2

Вы должны оставить элемент LI вокруг {{loginButtons}}.

<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 -->

Кроме того, вам нужен пакет, такой как account-facebook, account-password или accounts-google.

mrt add accounts-twitter

Ответ 3

Если вы проверите элемент, вы можете заметить:

#login-buttons {
    display: none;
}

Это была проблема, которую я имел, хотя, я не знаю, почему она установлена на display: none.

Ответ 4

У меня также были установлены пакеты bootstrap и bootstrap 3, которые прерывали css. Я сделал $ meteor remove bootstrap, и теперь все работает. Глупая ошибка, но, возможно, это поможет кому-то.

Ответ 5

Имела ту же проблему из-за пакета useraccounts:bootstrap, противоречащего этому пакету.

Удалите все пакеты (может быть достигнуто с помощью meteor remove или добавлением # перед именем пакета в .meteor/packages), а затем включите пакеты по одному. Вы узнаете, что пакет вызывает конфликт. Затем удалите конфликтующий пакет с помощью meteor remove {packagename}

Ответ 6

<li>{{ loginButtons }}</li>

Проблема здесь заключается в том, что вы забыли использовать > "больше, чем знак", поэтому он должен быть:

{{> loginButtons }}