Question

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

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

enter image description here

Answer 1

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

有些屏幕：

enter image description here

主题可在this Github issue 下方使用Gist。

修改

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

而且，我将在这个要点中保持主题：https://gist.github.com/koenpunt/6424137

Answer 2

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

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

screenshot of chosen alternative

Answer 3

此处还有另一个备用主题支持Bootstrap 3 https://github.com/dbtek/chosen-bootstrap。

看起来像原生bs输入。

chosen-bootstrap

Answer 4

Chosen.js（chosen.css）和bootstrap css都为你的输入添加CSS样式（选择）。尝试在bootstrap.css之后加载chosen.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的通用选择器将盒子大小设置为边框也造成了大部分麻烦。

要解决此问题，请重置所选元素的大小调整大小（）：

如果是$('#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）需要最新版本（＆lt; 2）的jQuery

Answer 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

Chosen.js样式不符合Bootstrap3样式

5 个答案:

主题可在this Github issue 下方使用Gist。