Bootstrap + JQuery：如何通過append動態創建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> 

我是bootstrap和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改為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>