动态生成的Bootstrap元素的间距问题

Question

我正在使用Twitter Bootstrap 2.2.2和jQuery 1.7.2尝试使用带有平面按钮样式的锚作为标记。保存文本输入后，动态添加此类标记;我使用的是非常简单的HTML结构：

<p>
    <a class="btn btn-small"><span>Tag 1</span></a>
    <a class="btn btn-small"><span>Tag 2</span></a>
</p>

使用jQuery我只需创建一个包含所需属性和值的新a，然后将其附加到段落。

但是，无论何时创建多个元素，元素之间的间距都会变得混乱，并且创建新标记时它们之间没有间距。

我创建了以下小提琴来演示我的问题：http://jsfiddle.net/marcelo1251/WeuLb/

点击添加标记2次以上，您将看到问题...

有没有办法用动态生成的元素修复间距？

谢谢， 马塞洛C.

Answer 1

如果你这样做，我会调查这个问题

 var tagClone = $('.template').html();
    $('p#target').append(tagClone);

它有效。

从技术上讲，它们不一样：

    //your code
    var tagClone = $('.template').clone(); //tagClone is a jQuery object
    $('p#target').append(tagClone.find('a'));

创建一个JQUERY OBJECT并将其附加到目标。

    //my code
    var tagClone = $('.template').html(); //tagClone is a string
    $('p#target').append(tagClone);

将html内容作为A STRING获取并将其附加到目标。 然而，追加函数（http://api.jquery.com/append/）可以接受jquery对象或html字符串，因此它应该以任何方式工作。