Bootstrap与Chosen插件之间的冲突

Question

我在Chosen Plugin和Adaptative CSS that makes the Chosen more Bootstrap friendly使用了惊人的Bootstrap CSS Framework，我的具体问题依赖于来自引导程序的表单控件验证 即可。根据{{​​3}}，您只需将类has-error添加到元素

即可

  

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

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

Answer 1

这是一个片段，可以正确地利用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）。