Bootstrap-3-tag-Liste mit input-Gruppe

Ich versuche zu machen, eine tag-Liste (wie im stackoverflow) mit einem bootstrap 3 input-Gruppe.

Das Ergebnis sollte ähnlich wie dieses Aussehen mit einem vollen Höhe auf die Schaltfläche rechts:

Bootstrap-3-tag-Liste mit input-Gruppe

Den Ausgangspunkt für meine überlegungen sieht wie folgt aus:

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

Hier ist mein Versuch zu machen, eine tag-Liste heraus (bitte beachten Sie, dass es sollte mehrere Zeilen)

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

Laufen demo in fiddle

Jedoch, dass nicht wie erwartet.

Können Sie mir zeigen, das Bild von dem Ergebnis, das Sie wollen, bitte?
sorry, ich habe nicht ein Bild. so etwas wie dieser mit einem button auf der rechten Seite wäre in Ordnung, aber.
Es sieht aus wie Sie haben könnten, zu entfernen oder zu Bearbeiten .Formular-Steuerelement-class/div
wenn ich entfernen .form-control, der Rahmen verschwindet...
Ich denke, man kann nicht nur, Formular-control zu verhüllen.Die Bootstrap-3-form-Steuerelement enthalten Feste Höhe. Sie haben zum hinzufügen von benutzerdefinierten css wie dieses... jsfiddle.net/bc3yh42k/1

InformationsquelleAutor speendo | 2014-09-12

  1. 0

    Müssen Sie Bearbeiten Ihre

    • Artikel für etwas wie dieses: 

      <span class="tag label label-primary">Primary<span data-role=
    "remove"></span></span>

      Fügen Sie diese zu Ihrem 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);
}

      ... Add bootstrap-tagsinput, um Ihre aus-Gruppe, bevor ul:

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

    InformationsquelleAutor EloiseM

Schreibe einen Kommentar