web-dev-qa-db-ja.com

Chosen.jsスタイルがBootstrap3スタイルに準拠していない

Selected.js v1.0を使用していて、プロジェクトでBootstrap 3を使用していますが、選択ボックスのスタイルはbootstrap 3スタイルに準拠していませんまったく。

私は何か間違っていますか？を使用して選択ボックスを呼び出しました
$('#select-input').chosen();正しい？

enter image description here

twitter-bootstrap-3jquery-chosen
23
cyberjar09

実際、選択されたためにBootstrap 3.0 CSSテーマを作成した人がいます。

いくつかの画面：

enter image description here

enter image description here

enter image description here

テーマは このGithubの問題 で利用できます 以下の要点を使用してください。

編集

a Fiddle を作成しました。Bootstrapテーマを適用したChosenの公式ドキュメントページと同じHTMLを使用します。すべての選択にform-controlを追加して削除しましたstyle="width:350px;"）

また、この要点でテーマを維持します： https://Gist.github.com/koenpunt/6424137

50
Koen.

Chosen 1.0の代替スタイルシート。これは、Bootstrap 3.0。

ここで利用可能 http://alxlit.github.io/bootstrap-chosen/

screenshot of chosen alternative

13
Subtletree

Bootstrap 3 here https://github.com/dbtek/chosen-bootstrap をサポートする別の代替テーマもあります。

ネイティブbs入力のように見えます。

chosen-bootstrap

6
dbtek

選択ボックスのサイズをレスポンシブに変更する場合は、次を使用できます。

[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

0
Alireza Fattahi

Chosen.js（chosen.css）とbootstrap cssはどちらも入力（選択）にCSSスタイルを追加します。bootstrap.cssの後にchoosed.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>
_

AddThisカウンターの右側の境界線がTwitterのBootstrap で欠落しています。ボックスのサイズ設定をborder-boxに設定するCSSのユニバーサルセレクターが最も多く発生したようです。トラブルの。

これを修正するには、choose（）を適用する要素のボックスサイズをリセットします。

$('#select-input').chosen();の場合、以下も設定します。

_#select-input
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}
_

デフォルトでは、chosened.jsにはjQueryの古いバージョンがバンドルされています。 Twitter Bootstrap（javascript）にはjQueryの最新バージョン（<2）が必要です

0
Bass Jobsen