Chosen.js 样式不符合 Bootstrap3 样式

Posted 2023-05-07

【中文标题】Chosen.js 样式不符合 Bootstrap3 样式

【英文标题】：Chosen.js styling not conforming to Bootstrap3 styles

【发布时间】：2013-08-23 16:24:00

【问题描述】：

我正在使用 selected.js v1.0 并在我的带有 Bootstrap 3 的项目中使用它，但是我的选择框的样式根本不符合 bootstrap 3 样式。

我做错了吗？我只是使用 $('#select-input').chosen(); 调用了选择框，对吗？

【参考方案1】：

实际上，有人为 Chosen 创建了 Bootstrap 3.0 CSS 主题。

一些屏幕：

主题在this Github issue中可用使用下面的Gist。

---

编辑

我创建了a Fiddle，使用与官方选择的文档页面相同的 html，并应用了 Bootstrap 主题。 （将form-control 添加到所有选择并删除style="width:350px;"）

此外，我将保持这个要点中的主题：https://gist.github.com/koenpunt/6424137

【参考方案2】：

Chosen 1.0 的备用样式表。这个应该与 Bootstrap 3.0 更好地集成。

可在此处http://alxlit.github.io/bootstrap-chosen/

【讨论】：

这对我来说是一种享受 - 也可以很好地与 bower 配合使用。

【参考方案3】：

这里还有另一个替代主题支持 Bootstrap 3 https://github.com/dbtek/chosen-bootstrap。

看起来像原生 bs 输入。

【参考方案4】：

Chosen.js (chosen.css) 和 bootstrap css 都将 CSS 样式添加到您的输入（选择）中。尝试在 bootstrap.css 之后加载choice.css：

  <link rel="stylesheet" href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css">
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop  left: -9000px; 
  </style>

完成此操作后，请参阅：Right border of the AddThis counter missing with Twitter's Bootstrap 3。似乎 CSS 的通用选择器将 box-sizing 设置为 border-box 造成了大部分麻烦。

要解决此问题，请重置您应用 selected() 的元素的框大小：

如果是$('#select-input').chosen();，你还要设置：

#select-input

  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;

NB 默认情况下 selected.js 捆绑旧版本的 jQuery。 Twitter Bootstrap (javascript) 需要最新版本 (

【讨论】：

我已经验证了 selected.min.css 文件是在 bootsrap.css 之后加载的，并且按照规定应用了样式。似乎仍然无法解决问题。我在页面上使用 jQuery 1.10.2

您能否展示一个显示问题的代码示例？ （我已经用 selected.js 提供的 index.html 测试了上述内容）

【参考方案5】：

如果您想更改选择框的大小以使其具有响应性，您可以使用：

[class*="col-"] .chosen-container 
    width:98%!important;

[class*="col-"] .chosen-container .chosen-search input[type="text"] 
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;

[class*="col-"] .chosen-container .chosen-drop 
    width: 100%!important;

来源：https://github.com/harvesthq/chosen/issues/1004