"tagsinput"세로를 표시하는 방법은 무엇입니까?

Question

사용자가 입력 필드에 태그를 만들 수 있도록 Jquery "tagsinput"을 사용하고 있습니다.

인라인 대신 세로 태그를 표시하고 싶습니다.
또한 "1300x1300"과 같이 입력하면 입력이 너비 100 %를 커버하지 않는 것처럼 보입니다.

어떻게 해결할 수 있습니까?

HTML

<table> 
    <tr> 
    <td class="oppningarTd"> 
     <input type="text" class="oppningar" data-role="tagsinput" multiple="true" /> 
    </td> 
    </tr> 
</table> 

CSS @ CBroe의 의견에

.bootstrap-tagsinput { 
    background-color: #fff; 
    border: 1px; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    color: #555; 
    vertical-align: middle; 
    width: 100%; 
    cursor: text; 
    white-space: pre; //Just trying something 
} 

td.oppningarTd { 
    border: 1px solid black; 
    background: white; 
    text-align: center; 
    width: 200px !important; 
} 

input.oppningar { 
    width: 100% !important; 
    text-align: center; 
} 

뿐인
https://jsfiddle.net/Lh4jy9d4/151/

Answer 1

덕분에, 나는 차에 성공 플러그인의 CSS를 삽입하십시오.

.bootstrap-tagsinput { 
    background-color: white; 
    border: 0px; 
    width: 100%; 
    cursor: text; 
} 
.bootstrap-tagsinput input { 
    border: none; 
    box-shadow: none; 
    outline: none; 
    background-color: transparent; 
    padding: 0; 
    margin: 0; 
} 
.bootstrap-tagsinput.form-control input::-moz-placeholder { 
    color: #777; 
    opacity: 1; 
} 
.bootstrap-tagsinput.form-control input:-ms-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder { 
    color: #777; 
} 
.bootstrap-tagsinput input:focus { 
    border: none; 
    box-shadow: none; 
} 
.bootstrap-tagsinput .tag { 
    margin: 4px; 
    color: white; 
    display: block; 
} 
.bootstrap-tagsinput .tag [data-role="remove"] { 
    float: right; 
    cursor: pointer; 
    color: red; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:after { 
    content: "x"; 
    padding: 0px 2px; 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
} 
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active { 
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 
}