twitter-bootstrap - 如何将 Meteor 的 loginButton 样式设置为不是下拉菜单？

Question

我看过这个线程 -
How to style Meteor.js loginButtons? - 它并没有完全回答我的问题。
我想保留 loginButton 样式，但根本不让它成为下拉列表。

Answer 1

好问题查理!

我无法获得 Accounts._loginButtonsSession.set('dropdownVisible', true);为我工作，所以我不得不通过 CSS 覆盖(这是带有 bootstrap-3 和 accounts-ui-bootstrap-3 的 Meteor 0.8):

首先，我将一个 ID 作为 loginButtons 的包装器:

<div id="login-screen">
  {{> loginButtons}}
</div>

然后我将它添加到我的 CSS 中:

/* The login menu has to be set at a specific height and I chose to center mine. */

#login-screen .dropdown-menu {
  display: block;
  position: relative;
  height: 245px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

#login-screen #login-dropdown-list {
  display: block;
}

/* Hides the toggle that you click on */

#login-screen a.dropdown-toggle {
  display: none;
}

因为我们包裹了 {{> loginButtons}}在 ID 包装器中并为此覆盖 CSS， {{> loginButtons}} 的正常功能被保留，所以如果你使用 {{> loginButtons}}再次在页面上的其他地方没有 ID 包装，正常的下拉功能被保留。