带有输入组的Bootstrap 3标签列表

Question

我尝试使用bootstrap 3 input group创建标记列表（例如在stackoverflow中）。

结果看起来与此类似，右侧有一个完整的高度按钮：

我考虑的基础如下：

<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>

这是我尝试制作标签列表（请注意它应该有多行）

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：

ul {
    padding-left: 0;
    display: inline;
    list-style-type: none;
}
li {
    display: inline-block;
}

Running demo in fiddle

然而，这并不像预期的那样有效。

Answer 1

要创建代码部分，您可以使用bootstrap-tagsinput by Tim Schlechter，然后将其设置为类似于Bootstrap's Input Group的样式，并使用这样的自定义样式：

jsFiddle中的演示＆amp; 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>

---

可解雇警报

如果您只是尝试为可移动元素设置样式，则可以执行与Bootstrap's Dismissable Alert相似的操作，其中一些自定义样式将如下所示：

jsFiddle中的演示＆amp; 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>

Answer 2

您需要编辑

项目，如下所示：

<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添加到你的from-group

<div class="form-control bootstrap-tagsinput">