Подтвердить что ты не робот

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

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

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

enter image description here

4b9b3361

ОТВЕТЫ

Ответ 1

Собственно, есть кто-то, кто создал тему Bootstrap 3.0 для избранных.

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

enter image description here

enter image description here

enter image description here

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

Edit

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

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

Ответ 2

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

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

screenshot of chosen alternative

Ответ 3

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

Похоже на нативные входы bs.

chosen-bootstrap

Ответ 4

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

Чтобы исправить этот reset размер полей выбранных вами элементов():

В случае $('#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

Ответ 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