为什么元素不显示水平？

Question

我有一个简单的 AngularJs 应用程序，我使用 Bootstrap 作为样式。 我写了下一个代码：

<div class="container" >
    <div class="gallery">
        <div class="row">
            <div class="col-md-3">
                <div ng-repeat="itm in albumsCovers">
                    <a href="#album/"+{{itm.id}} data-title="My first Caption" data-lighbox="Vocation">
                    <img src="{{itm.link}}" width="200px" class="img-rounded" />
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

我正在阅读关于Bootstrap的文档，我找到了水平元素，我应该使用 .col-md-3 ，但它不起作用。也许有人知道如何解决它？

P.S。在我的应用程序中，我使用 ng-view 指令。

Answer 1

重复的div应该有col-md-3类，你现在正在做的是用一堆div作为孩子创建一个div.col-md-3

根据这一点的改变应该解决它：

            <div class="col-md-3" ng-repeat="itm in albumsCovers">
                <a href="#album/"+{{itm.id}} data-title="My first Caption" data-lighbox="Vocation">
                <img src="{{itm.link}}" width="200px" class="img-rounded" />
                </a>
            </div>

Answer 2

这应该有效。您将所有图像放在一个div列中，而不是为每个图像div创建一个3单位列。

<div class="container" >
    <div class="gallery">
        <div class="row">
            <div class="col-md-3" ng-repeat="itm in albumsCovers">
                    <a href="#album/"+{{itm.id}} data-title="My first Caption" data-lighbox="Vocation">
                    <img src="{{itm.link}}" width="200px" class="img-rounded" />
                    </a>
            </div>

        </div>
    </div>
</div>