javascript - 单击创建时， Bootstrap 标签之间的空格会被删除

Question

当我点击我的按钮创建时，它每次都会创建一个新的 Bootstrap 标签。

但是当它出现时，没有间隙，如下图所示，标签聚在一起。

问题 我怎样才能做到这样，当我点击我的创建按钮时，标签之间会有空格。 jQuery 似乎删除了空格。

CODEPEN DEMO

$(document).on("click", "#tag", function(event) {
  $('.label-container').append('<div class="label label-default">Default</div>');
});

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="label-container"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <button type="button" id="tag" class="btn btn-default">Create</button>
    </div>
  </div>
</div>

Answer 1

只需为您的标签添加边距即可。

在你的 CSS 中:

.label {
  margin: 2px;
}