javascript - Bootstrap + JQuery : How break lines of spans in div dynamically created by append

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>

您可以通过在动态注入(inject)标记末尾的 span 后面放置一个空格来解决此问题。

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

但是，我认为更正确的方法是使用 CSS，将标签的显示更改为内联 block :

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