Bootstrap，動態添加內聯輸入時有較小的間隙

在模態中：出於某種原因當我動態地添加一個帶有兩個輸入字段的li使用jquery append時，第一個li（它已經存在）的間距在之間的兩個inputs然後其餘的動態添加。
在Chrome中檢查開發人員工具後，我看到它們都具有相同的填充，邊距和邊框。從CSS的角度來看，我看不出第一個有更大差距的原因。Bootstrap，動態添加內聯輸入時有較小的間隙

enter image description here

<div class="modal-body"> 
<ul id="add-groups-list"> 
    <li class="add-group-item"> 
     <input type="text" placeholder="Group Name" /> 
     <input type="text" placeholder="Spots Available" /> 
    </li> 
</ul> 
<p><a href="#" id="add-group-in-modal" class="btn btn-small">+</a></p> 
</div>

中的骨幹視圖

我這樣做：

addGroupInModal: function(e){ 
     e.preventDefault(); 
     this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /><input type="text" placeholder="Spots Available" /></li>'); 
    },

下面是一些CSS：

#add-groups-list{ 
    list-style: none; 
} 

.add-group-item input{ 
    margin-left: 5px; 
}

來源

2013-08-18 Johnston

我最終做的是將單個列表項目變成模板。所以我沒有必要重複自己的HTML，所以我沒有結束空白問題。因爲我使用Backbone。 – Johnston

的原因是空白，添加一個文本節點在2個輸入之間有1個空格，或者不要縮進HTML代碼。

this.$el.find("#add-groups-list").append('<li class="add-group-item"><input type="text" placeholder="Group Name" /> <input type="text" placeholder="Spots Available" /></li>');

來源

2013-08-18 13:05:42

正如Antti所說，問題在於正在呈現input元素之間的空白。但是，如果你想保持HTML有點更具可讀性，你也可以用CSS的只是漂浮的投入解決這個問題：

#add-groups-list { 
    list-style: none; 
} 

.add-group-item input { 
    float: left; 
    margin-left: 5px; 
}

然後加引導的clearfix類的li元素的好辦法。

解決這個問題的另一種方法是將父元素（li）上的font-size設置爲0.但我更喜歡浮動輸入。

http://jsfiddle.net/MY7zY/7/

來源

2013-08-18 13:29:07 stuajc

Bootstrap，動態添加內聯輸入時有較小的間隙

回答

相關問題