Bootstrap + JQuery：如何通過追加動態創建div中的跨度行

Question

我正在使用jquery .append命令動態追加到。我有渲染多行的問題。如果我添加了太多跨度不符合一行，下一個跨度不會移動到第二行。所有跨度仍然在一行中。

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

當跨度不添加動態地萬物看起來不錯：

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

我引導和jQuery初學者，我相信我不得不忽略一些東西。我在堆棧上尋找一個類似的例子，但找不到任何東西。請幫忙！ :)

Answer 1

您的動態添加例如與硬編碼之間的差異是空白。在硬編碼示例中，每個<span></span>\n<span></span>都在它自己的行上，所以每個之間都有一個空格字符。當你動態地添加它們時，它們都是一行，它們之間沒有字符<span></span><span></span>

你可以通過在動態注入標記結束時在跨度後面加一個空格來解決此問題。

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

不過，我覺得更正確的方法是使用CSS，改變標籤的顯示，以inline-block的：

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

Answer 2

更改.label顯示：inline to 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

試試這個解決方案。

您必須添加css才能將跨度移至下一行。

我還用min-height和max-height和overflow-y向下滾動您的div，如果有更多的選項卡。

希望這會幫助你。 :)

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