Таблица стилей отсутствует в Bootstrap3 TagsInput

Я запутался этот баг в течение длительного периода времени. Таблица стилей отсутствует в Bootstrap3 TagsInput (на моем сайте)

  • Это мой веб-сайт:

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

и мой код:

$('#TagForm').tagsinput('input').typeahead({ prefetch: '/api/tag/list' }).bind('typeahead:selected', $.proxy(function (obj, datum) { this.tagsinput('add', datum.value); this.tagsinput('input').typeahead('setQuery', ''); }, $('#TagForm')));

  • Это официальный сайт:

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

и код официального сайта:

$('input').tagsinput();

// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
   prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));

Я сравнил свой код с кодом на официальном сайте и не нашел проблемы.


twitter-bootstrap-3 bootstrap-typeahead bootstrap-tags-input
person Tony    schedule 01.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, что есть некоторые пользовательские стили, примененные к документации по вводу тегов, где вы сделали этот снимок экрана. Если вы хотите точно соответствовать ему, вам, вероятно, следует скопировать их файл app.css или, по крайней мере, добавить эти стили в свой собственный файл css:

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

Насколько я могу судить, это релевантные, но вы всегда можете скопировать весь файл и удалить ненужные.

person jme11    schedule 01.07.2014
comment
Я решил проблему с вашим ответом. Большое спасибо! - person Tony; 02.07.2014