单击

Question

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

但是当它确实没有间隙时，你可以在下面的图片中看到标签已经聚集在一起。

问题如何点击我的创建按钮，标签将在它们之间留出空格。 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;
}

Answer 2

缺少的是inline-block通常会为inline-block元素之间的空格留下空白 - 例如，如果您在标记中创建这些元素，并在它们之间添加线条，那么将包括一个小差距。但是，append方法不会添加空格，因此元素直接相邻。

虽然我同意amallard用CSS处理这个问题的解决方案，如果你真的想重新创建写入HTML时的外观效果，你可以简单地包含少量的空格（如单个空格） ）在append：

中

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