![](/img/trans.png)
[英]Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions
[英]Bootstrap, inline inputs have smaller gap when added dynamically
在模态中:出于某种原因当我使用jquery append
动态添加带有两个输入字段的li时,第一个li
(已经存在)的间距在两个inputs
之间有较大的间隙,其余的是动态添加的。
检查Chrome中的开发人员工具后,我发现它们都具有相同的填充,边距和边框。 从CSS的角度来看,我看不出为什么第一个会有更大的差距。
<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;
}
原因是空格,在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>');
正如Antti所说,问题在于渲染input
元素之间的空白。 但是如果你想让HTML更具可读性,你也可以通过浮动输入来解决这个问题:
#add-groups-list {
list-style: none;
}
.add-group-item input {
float: left;
margin-left: 5px;
}
然后将Bootstrap的clearfix
类添加到li
元素中以获得良好的衡量标准。
另一种解决方法是将父元素( li
s)上的font-size
设置为0.但我更喜欢浮动输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.