[英]Bootstrap, inline inputs have smaller gap when added dynamically
In a modal: For some reason When I dynamically add a li with two input fields using jquery append
the spacing of the first li
(which was already there) has a bigger gap in between the two inputs
then the rest that are added dynamically. 在模态中:出于某种原因当我使用
jquery append
动态添加带有两个输入字段的li时,第一个li
(已经存在)的间距在两个inputs
之间有较大的间隙,其余的是动态添加的。
After checking the developer tools in Chrome, I see that they all have the same padding, margins and borders. 检查Chrome中的开发人员工具后,我发现它们都具有相同的填充,边距和边框。 From a CSS point of view I can't see a reason why there would be a larger gap in the first one.
从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>
in a backbone view I do this: 在骨干视图中我这样做:
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>');
},
Here is some CSS: 这是一些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>');
As Antti says, the problem is that the whitespace between the input
elements is being rendered. 正如Antti所说,问题在于渲染
input
元素之间的空白。 But if you want to keep the HTML a little more readable, you can also solve this with CSS by just floating the inputs: 但是如果你想让HTML更具可读性,你也可以通过浮动输入来解决这个问题:
#add-groups-list {
list-style: none;
}
.add-group-item input {
float: left;
margin-left: 5px;
}
And then add Bootstrap's clearfix
class to the li
elements for good measure. 然后将Bootstrap的
clearfix
类添加到li
元素中以获得良好的衡量标准。
Another way to solve it would be setting font-size
on the parent elements (the li
s) to 0. But I prefer floating the inputs. 另一种解决方法是将父元素(
li
s)上的font-size
设置为0.但我更喜欢浮动输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.