Question

我尝试使用ng-repeat指令向我的内联表单添加按钮。它正在工作，但使用ng-repeat时按钮会丢失它们之间的间距。如果我删除ng-repeat并且只是为按钮添加完全相同的html，那么按钮之间的间距就可以了。

如果非常奇怪，因为生成的html完全相同。

Answer 1

让我们看一下呈现的 HTML ...

首先是无角度的：

<div class="form-inline">

    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>
    <div class="button-wrapper">
        <button type="button" class="btn btn-default">
            <span>123</span>
        </button>
    </div>

</div>

现在是Angular：

<div class="form-inline ng-scope" ng-controller="MyCtrl">

    <!-- ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">123</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">456</span>
        </button>
    </div><!-- end ngRepeat: button in buttons --><div class="button-wrapper ng-scope" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span class="ng-binding">789</span>
        </button>
    </div><!-- end ngRepeat: button in buttons -->

</div>

看到区别？在手动键入的HTML中，按钮包装器div之间存在换行符和代码对齐空间，但是在ng-repeat呈现的HTML中没有。这些换行符和空格在视觉上呈现为每个div之间的单个空格。这可以通过删除手工类型HTML上的div之间的换行符来证明。我相信bootstrap的意图是在按钮之间没有空格的情况下呈现，除非明确定义。

This other question addresses how to eliminate the spaces

Answer 2

我在小提琴中看到了这个例子，但是如果你删除了div线，那就得到同样的结果。

然而我在ng-repeat中的Bootstrap样式遇到很多问题，在我的例子中，解决方案是使用ng-repeat指令将var allWord = GetWords(xdoc); foreach (var word in allWord) { if (!spellChecker.CheckWord(word)) { result.WriteLine(word); } }放在div中

style="display: inline-block;"

Answer 3

感谢@ Lathejockey81的回答，我终于意识到了一个有效的解决方案。在除了最后一个按钮之后的每个按钮之后，我们需要使用div插入空的display: inline-block。此div必须是ng-repeat ed标记内的最后一个标记。

<div class="form-inline" ng-controller="MyCtrl">

    <div class="button-wrapper" ng-repeat="button in buttons">
        <button type="button" class="btn btn-default">
            <span>{{button}}</span>
        </button>
        <div ng-show="!$last" style="display: inline-block;"></div>
    </div>

</div>

更新了工作fiddle。

ng-repeat打破了.form-inline中的bootstrap样式

3 个答案: