25

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

我做错什么了吗？我只是使用正确的调用选择框
$('#select-input').chosen();？

在此处输入图像描述

4

5 回答 5

51

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

一些画面：

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

该主题在此 Github 问题中可用使用下面的要点。

编辑

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

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

于 2013-08-28T12:11:06.303 回答
13

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

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

所选替代方案的屏幕截图

于 2013-08-28T12:24:04.390 回答
6

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

看起来像原生 bs 输入。

选择引导

于 2014-05-04T10:13:23.560 回答
0

Chosen.js (chosen.css) 和 bootstrap css 都将 CSS 样式添加到您的输入（选择）中。尝试在 bootstrap.css 之后加载 selected.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>

执行此操作后，请参阅：Twitter 的 Bootstrap 3 缺少 AddThis 计数器的右边框。似乎 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;
}

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

于 2013-08-21T21:16:01.743 回答
0

如果您想更改选择框大小以响应您可以使用：

[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

于 2015-02-07T07:24:20.263 回答