0

오랫동안이 버그를 얽었습니다. Bootstrap3에 StyleSheet가 없습니다. TagsInput

enter image description here

내 코드는 다음과 같습니다 :

$('#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')));

스타일 시트는

  • 이 내 웹 사이트입니다 (내 웹 사이트에) Bootstrap3 TagsInput에 없습니다 이다

enter image description here

공식 웹 사이트의 코드 :

  • 이공식 웹 사이트입니다

    $('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'))); 
    

    내가 공식 웹 사이트의 코드 내 코드를 비교 한 수 문제를 찾지 못했습니다.

답변

1

해당 스크린 샷을 촬영 한 태그 입력 문서에 일부 맞춤 스타일이 적용된 것처럼 보입니다. 당신이 정확히 일치 할 경우, 당신은 아마 자신의 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; 
} 

는 지금까지 내가 말할 수있는, 이러한 관련 것들, 하지만 항상 전체 파일을 복사하고 적용되지 않는 파일은 제거 할 수 있습니다.

+0

나는 당신의 대답으로이 문제를 해결했습니다. 고마워요! – Tony