（不）使用ng-repeat时的奇怪风格行为

Question

我需要在bootstrap模式中显示一个复选框列表。我使用角度ng-repeat来显示各种复选框，它工作正常：

<label class="checkbox-inline" ng-repeat="l in ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']">
    <input type="checkbox" value="{{ l }}" /> {{ l }}
</label>

然后，我唯一改变的是手动创建所有复选框：

<label class="checkbox-inline">
    <input type="checkbox" value="A" /> A
</label>
<label class="checkbox-inline">
    <input type="checkbox" value="B" /> B
</label>
....

在破坏风格的字母之后还有一点空间。

这可能是一个愚蠢的事情，但我真的不知道这种风格的变化来自哪里！有人在不使用ng-repeat时知道为什么会有额外的空间吗？

这是一个小提琴https://jsfiddle.net/4hkw8h43/ 第一个按钮打开没有ng-repeat的模态，第二个按钮打开ng-repeat ...

Answer 1

正如您已经发现的那样，这是一个空白问题，通常在使用$('[class^=btn]').click(function(){ $('[class^=img]').hide().eq($(this).index()).show(); }); 水平对齐内容时会发生。我无法告诉你为什么会发生这种情况，但如何解决它。此修复程序将来对您有用。

要解决此问题，请执行以下操作：

display: inline-block;

https://jsfiddle.net/4hkw8h43/2/

所以基本上，在父级上设置.whitespace-eliminator { font-size: 0; } .whitespace-eliminator label { font-size: 14px; } 会使白色空间在视觉上消失。之后，您必须重置内部仍为font-size: 0;的子元素的字体大小。