Bootstrap，内联输入在动态添加时具有较小的间隙答案

【问题标题】：Bootstrap, inline inputs have smaller gap when added dynamicallyBootstrap，内联输入在动态添加时具有较小的间隙
【发布时间】：2013-08-18 12:55:12
【问题描述】：

在模态中：出于某种原因，当我使用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;
}

【问题讨论】：

我最终将单个列表项转换为模板。所以我不必用 HTML 重复自己，所以我也没有遇到空白问题。因为我使用的是 Backbone。

标签： javascript html css twitter-bootstrap backbone.js

【解决方案1】：

原因是空格，在两个输入之间添加一个带有 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>');

【讨论】：

【解决方案2】：

正如 Antti 所说，问题在于 input 元素之间的空白正在被渲染。但是，如果您想让 HTML 更具可读性，您也可以通过浮动输入来使用 CSS 解决这个问题：

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

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

然后将 Bootstrap 的 clearfix 类添加到 li 元素中以获得良好的度量。

解决它的另一种方法是将父元素（lis）上的 font-size 设置为 0。但我更喜欢浮动输入。

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

【讨论】：