twitter-bootstrap 带输入组的 Bootstrap 3 标签列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25816004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 tag list with input group
提问by speendo
I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.
我尝试使用bootstrap 3 input group制作标签列表（如在 stackoverflow 中）。
The result should look similar to this with a full height button on the right:
结果应该与右侧的全高按钮类似：
The base for my considerations looks like this:
我考虑的基础是这样的：
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
Here is my attempt to make a tag list out of it (please note that it should have multiple lines)
这是我尝试从中制作标签列表（请注意它应该有多行）
HTML:
HTML：
<div class="container-fluid">
<div class="input-group">
<div class="form-control">
<ul>
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
... even more labels ...
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
</ul>
<input type="text">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
CSS:
CSS：
ul {
padding-left: 0;
display: inline;
list-style-type: none;
}
li {
display: inline-block;
}
However, that doesn't work as expected.
但是，这并不像预期的那样工作。
回答by KyleMit
To create the tag portion, you can use bootstrap-tagsinputby Tim Schlechterand then style it similar to Bootstrap's Input Groupwith some custom styling like this:
要创建标签部分，您可以使用Tim Schlechter 的bootstrap-tagsinput，然后使用一些自定义样式将其设置为类似于Bootstrap 的输入组的样式，如下所示：
Demo in jsFiddle& Stack Snippets
jsFiddle& Stack Snippets 中的演示
.input-group .bootstrap-tagsinput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%
}
.input-group-btn {
height: 0px;
}
.input-group-btn .btn {
height: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<div class="input-group">
<input type="text"
class="bootstrap-tagsinput form-control"
data-role="tagsinput"
value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>Dismissable Alert
可解除警报
If you're just trying to style a removable element, you can do that similar to Bootstrap's Dismissable Alert, with some custom styling which will look like this:
如果你只是想设计一个可移动元素的样式，你可以像Bootstrap 的 Dismissable Alert 那样做，使用一些自定义样式，如下所示：
Demo in jsFiddle& Stack Snippets:
jsFiddle& Stack Snippets 中的演示：
.alert.alert-tag {
display: inline-block;
padding: 5px;
padding-bottom:2px;
margin: 5px;
}
.alert-tag.alert-dismissible {
padding-right: 25px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Label
</div>回答by EloiseM
You need edit your
你需要编辑你的
<span class="tag label label-primary">Primary<span data-role=
"remove"></span></span>
Add this to your css:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.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);
}
And... add bootstrap-tagsinput to your from-group before ul:
<div class="form-control bootstrap-tagsinput">
<span class="tag label label-primary">Primary<span data-role=
"remove"></span></span>
将此添加到您的 css：
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.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);
}
并且...在 ul 之前将 bootstrap-tagsinput 添加到您的源组：
<div class="form-control bootstrap-tagsinput">
