Bootstrap + JQuery: Wie Break-Linien von Spannen in div dynamisch erstellt von append

Question

Ich bin dynamisch an die Verwendung von jquery. Append-Befehl anfügen. Ich habe Probleme mit dem Rendern mehrerer Zeilen. Wenn ich zu viele Bereiche hinzufüge, die nicht in eine Zeile passen, wird der nächste Bereich nicht in die zweite Zeile verschoben. Alle Spannen sind immer noch in einer Linie.

$(document).ready(function() { 
 
    $("button").click(function(e) { 
 
     addTag($("div#tag-line"),"tag"); 
 
    }); 
 
}); 
 

 
function addTag(tagField, tagValue) { 
 
    tag = '<span class="label label-info" style="margin: 2px">' + tagValue + '</span>' 
 
    tagField.append(tag); 
 
    tagField.hide().fadeIn('fast') 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="form-group"> 
 
    <label for="tags" class="col-lg-3 control-label">Tags</label> 
 
    <button> 
 
    add 
 
    </button> 
 
    <h4> 
 
    <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> 
 
    </div> 
 
    </h4> 
 
</div>

Wenn Spanne nicht dynamicly every hinzugefügt wird, sieht gut aus:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-group"> 
 
    <label for="tags" class="col-lg-3 control-label">Tags</label> 
 
    <div class="col-lg-9"> 
 
    <input type="text" class="form-control" id="tokenfield"/> 
 
    </div> 
 
    <button> 
 
    add 
 
    </button> 
 
    <h4> 
 
    <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
     <span class="label label-info" style="margin: 2px">asda</span> 
 
    </div> 
 
    </h4> 
 
</div>

Ich bin Bootstrap und jquery Anfänger und ich bin überzeugt, dass ich musste etwas übersehen. Ich suchte nach einem ähnlichen Beispiel auf dem Stapel, konnte aber nichts finden. Bitte helfen Sie! :)

Answer 1

Der Unterschied zwischen Ihrem dynamisch hinzugefügt Beispiel und einem hart codiert ist weißer Raum. Jede <span></span>\n<span></span> ist in der eigenen Zeile in dem hartcodierten Beispiel, so dass zwischen jedem ein Leerzeichen steht. Wenn Sie sie dynamisch hinzufügen, sind sie alle eine Zeile ohne Zeichen dazwischen <span></span><span></span>

Sie können dies beheben, indem Sie direkt nach dem Bereich am Ende des dynamisch eingefügten Markups ein Leerzeichen einfügen.

tag = '<span class="label label-info" style="margin: 2px">' + tagValue + '</span> ' 

Aber ich denke, ein richtiger Ansatz mit CSS sein würde, das Display des Etiketts ändert Inline-Block:

#tag-line .label { display: inline-block; } 

Answer 2

Ändern Sie die .Label-Anzeige: Inline zu Inline-Block;

.label { 
    display: inline-block; 
    padding: .2em .6em .3em; 
    font-size: 75%; 
    font-weight: 700; 
    line-height: 1; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: baseline; 
    border-radius: .25em; 
    } 

Answer 3

Versuchen Sie diese Lösung.

Sie müssen css hinzufügen, um span in die nächste Zeile zu verschieben.

und ich auch min-height und max-height und overflow-y für scrollen Sie nach unten div, wenn es mehr Tabs gibt.

Hoffe, das wird Ihnen helfen. :)

$(document).ready(function() { 
 
    $("button").click(function(e) { 
 
     addTag($("div#tag-line"),"tag"); 
 
    }); 
 
}); 
 

 
function addTag(tagField, tagValue) { 
 
    tag = '<span class="label label-info" style="margin: 2px; display: inline-block">' + tagValue + '</span>' 
 
    tagField.append(tag); 
 
    tagField.hide().fadeIn('fast') 
 
}

#tag-line 
 
{min-height:50px; max-height: 200px; max-width: 300px; word-wrap: break-word; overflow-y: scroll;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="form-group"> 
 
    <label for="tags" class="col-lg-3 control-label">Tags</label> 
 
    <button> 
 
    add 
 
    </button> 
 
    <h4> 
 
    <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> 
 
    </div> 
 
    </h4> 
 
</div>