Стиль Chosen.js не соответствует стилям Bootstrap3

Я использую selected.js v1.0 и использую его в своем проекте с Bootstrap 3, но стили моих окон выбора вообще не соответствуют стилям bootstrap 3.

Я что-то не так делаю? Я просто вызвал поля выбора с помощью
$('#select-input').chosen();, верно?

введите описание изображения здесь


twitter-bootstrap-3 jquery-chosen
person cyberjar09    schedule 21.08.2013    source источник

Ответы (5)


arrow_upward
51
arrow_downward

На самом деле, есть кто-то, кто создал тему CSS Bootstrap 3.0 для Chosen.

Некоторые экраны:

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Тема доступна в этом выпуске Github Используйте Gist ниже.

Изменить

Я создал Fiddle, используя тот же HTML, что и официальная страница документации Chosen с примененной темой Bootstrap. (добавлено form-control ко всем выделенным и удалено style="width:350px;")

Кроме того, я буду поддерживать тему в этой сути: https://gist.github.com/koenpunt/6424137

person Koen.    schedule 28.08.2013

arrow_upward
13
arrow_downward

Альтернативная таблица стилей для Chosen 1.0. Предполагается, что он лучше интегрируется с Bootstrap 3.0.

Доступно здесь http://alxlit.github.io/bootstrap-chosen/

снимок экрана выбранной альтернативы

person Subtletree    schedule 28.08.2013
comment
Это работает для меня - также хорошо играет с беседкой. - person ptim; 28.03.2014

arrow_upward
6
arrow_downward

Здесь также есть еще одна альтернативная тема, поддерживающая Bootstrap 3, https://github.com/dbtek/chosen-bootstrap.

Похоже на родные входы BS.

selected-bootstrap

person dbtek    schedule 04.05.2014

arrow_upward
0
arrow_downward

Chosen.js (selected.css) и bootstrap css добавляют стили CSS к вашим входным данным (выбирает). Попробуйте загрузить selected.css после bootstrap.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. Похоже, что универсальный селектор CSS для установки размера поля на 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) требует последней версии (‹2) jQuery.

person Bass Jobsen    schedule 21.08.2013
comment
Я подтвердил, что файл selected.min.css загружен после bootsrap.css, и применил стили в соответствии с предписаниями. По-прежнему, похоже, не решает проблему. Я использую jQuery 1.10.2 на странице - person cyberjar09; 22.08.2013
comment
Можете ли вы показать пример вашего кода, показывающего проблему? (я протестировал это с помощью index.html, поставляемого с selected.js) - person Bass Jobsen; 22.08.2013

arrow_upward
0
arrow_downward

Если вы хотите изменить размеры поля выбора, чтобы они были отзывчивыми, вы можете использовать:

[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

person Alireza Fattahi    schedule 07.02.2015