Question

我正在尝试使用bootstrap的网格系统格式化ng-repeat指令的结果，以便返回的每个项目占用12个可用列中的6个。它工作正常，但造型有问题。这是HTML：

<div class="bestof card col-lg-12 col-md-8">
    <div class="inner">
        <h1>Best of {{dest.name}}</h1>

        <div class="col-lg-6" ng-repeat="best in bestHotels | limitTo: 2 track by $index">
                <img class="best_thumbnail" ng-src="{{best.thumbnail}}"/>
                <p>{{best.description}}</p>
        </div> 

    </div> <!-- inner -->
</div> <!-- bestof -->

CSS：

.inner {
    border-top: 0;
    border-left: solid 1px #c4c4c4;
    border-bottom: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    box-shadow: 0 1px #c1c1c1;
    padding-bottom: 1em;
    padding: 1em;
    height: auto;
}

基本上，内部 div似乎在封闭ng-repeat之前就停止了，所以我在<h1>后面有一个底部边框，但在任何内容实际显示之前。有什么想法会发生什么？

Answer 1

我想您要确保.inner DIV有overflow:auto这样的内容。

.inner {
    border-top: 0;
    border-left: solid 1px #c4c4c4;
    border-bottom: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    box-shadow: 0 1px #c1c1c1;
    padding-bottom: 1em;
    padding: 1em;
    height: auto;
    overflow: auto;
}

演示： http://bootply.com/3zT91GNLNI

编辑 - @Pevara建议的更好的解决方案是让inner成为row ..

http://bootply.com/mv0T7iZHrX

ng-repeat中的Bootstrap网格系统

1 个答案: