Bootstrap 和 Chosen Plugin 之间的冲突答案

【问题标题】：Conflict between Boostrap and Chosen PluginBootstrap 和 Chosen Plugin 之间的冲突
【发布时间】：2015-03-25 16:41:27
【问题描述】：

我将惊人的Chosen Plugin 与Adaptative CSS that makes the Chosen more Bootstrap friendly 和Bootstrap CSS Framework 一起使用，我的具体问题依赖于Bootstrap 中的Form Control Validation。根据docs，您只需将has-error 类添加到元素并

该元素中的任何 .control-label、.form-control 和 .help-block 都将接收验证样式。

问题是 Chosen 不是上述任何一个，它只是一个 div。我正在寻找有关如何在 has-error 类上包装 Chosen 插件以提供“无效状态”的想法。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这里有一个 sn-p 来正确利用 bootstrap 实用程序类（在本例中为 has-error）以及 selected.js 注入的 html：

select.form-control + .chosen-container.chosen-container-single.has-error .chosen-single {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

如您所见，我们已将实用程序类添加到我们的根元素中，可以通过使用选择的 id 约定访问它，其中 selected 接受输入 id (#foo)，附加 _chosen (#foo_chosen) 并将其分配给根元素（.chosen-container）。

【讨论】：