點擊創建時，引導標籤之間的空間被刪除

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 elements--之間，例如，如果你在用線標記創建這些元素它們之間將包括一個小小的差距。但是，append方法不會添加空格，因此這些元素是直接相鄰的。

雖然我處理這個使用CSS，如果你真的想重建的它的外觀時寫入HTML的影響amallard的解決方案達成一致，你可以簡單地包含空格的少量（如一個空格）您append：

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