Meteor 1.6.1.1：给ian:accounts-ui-bootstrap-3的SELECT标签加form-control类

嘿，我来帮你搞定这个问题！你在使用ian:accounts-ui-bootstrap-3替代原生accounts-ui时，自定义的<select>字段没自动带上form-control类，这是因为这个包只会给它默认生成的表单元素自动添加Bootstrap样式类，自定义字段得我们手动处理。下面给你几个实用的解决方案：

方案1：直接在自定义字段里指定class #

这是最直接的办法——在你写自定义<select>标签的时候，手动加上class="form-control"就行。比如：

<select id="my-custom-select" class="form-control" name="customUserField">
  <option value="basic">基础权限</option>
  <option value="admin">管理员</option>
</select>

这样渲染出来的select就会自动应用Bootstrap的表单控件样式，和其他默认元素保持一致。

方案2：用模板渲染钩子自动补全class #

如果你的select字段是动态生成的，没法直接写class，可以用Meteor的模板渲染钩子来自动添加。在客户端的JS文件里加这段代码：

Template.loginButtons.onRendered(function() {
  // 定位到登录下拉框里的所有select元素，添加form-control类
  this.$('#login-dropdown-list select').addClass('form-control');
});

每次登录下拉框渲染完成后，这段代码都会自动找到里面的select元素并补上需要的样式类，省心又高效。

方案3：扩展包的默认模板 #

如果需要更深度的自定义，你可以直接扩展ian:accounts-ui-bootstrap-3的模板，完全掌控表单结构。先创建一个自定义模板：

<template name="customLoginDropdown">
  <li id="login-dropdown-list" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join</a>
    <div class="dropdown-menu">
      <!-- 这里放你的自定义select，记得加form-control -->
      <div class="form-group">
        <label>用户权限</label>
        <select class="form-control" name="userRole">
          <option value="viewer">查看者</option>
          <option value="editor">编辑者</option>
        </select>
      </div>
      <!-- 保留原有的登录/注册内容 -->
      {{> loginButtonsDropdownContent}}
    </div>
  </li>
</template>

然后在客户端JS里注册这个模板，替代默认的登录下拉框：

Accounts.ui.config({
  loginTemplate: 'customLoginDropdown'
});

这种方式能让你完全按照自己的需求调整表单布局和样式，自由度最高。

内容的提问来源于stack exchange，提问作者Ankur Soni