25

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

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

ここに画像の説明を入力

4

5 に答える 5

51

実際、Chosen の Bootstrap 3.0 CSS テーマを作成した人がいます。

一部の画面:

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

テーマはこの Github issueで入手できます以下のGistを使用してください。

編集

Bootstrap テーマを適用した公式の Chosen ドキュメント ページと同じ HTML を使用して Fiddleを作成しました。（すべての選択に追加さ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 に答える
0

Chosen.js (chosen.css) とブートストラップ css はどちらも CSS スタイルを入力 (選択) に追加します。bootstrap.css の後に choose.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 3 で欠落しています。box-sizing を border-box に設定する CSS のユニバーサル セレクターが、ほとんどの問題を引き起こしたようです。

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

あなたの場合$('#select-input').chosen();も設定します：

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

注意: デフォルトで、choose.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 に答える