2

I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.

The result should look similar to this with a full height button on the right:

should look similar to this

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:

<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

However, that doesn't work as expected.

4

2 回答 2

6

要创建标签部分，您可以使用Tim Schlechter 的bootstrap-tagsinput，然后将其设置为类似于Bootstrap 的 Input Group 的样式，并使用如下自定义样式：

标签输入组

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>

可忽略的警报

如果你只是想设计一个可移动元素的样式，你可以像Bootstrap 的 Dismissable Alert那样做，使用一些自定义样式，如下所示：

警报标签

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>

于 2014-09-12T21:33:48.027 回答
0

你需要编辑你的

  • 像这样的项目：

    <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">
    • 于 2014-09-12T20:42:59.130 回答