2015-01-26 53 views
0

我在尝试使用引导程序的网格系统来格式化ng-repeat指令的结果,以便返回的每个项目占用12个可用列中的6个。它工作正常,但造型存在问题。这是HTML:ng-repeat中的自举网格系统

<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; 
} 

基本上,格似乎包围NG-重复之前刚刚停下来,所以我在我的<h1>之后有一个底部边框,但在任何内容实际显示之前。任何想法发生了什么?

+2

您可以在JSFiddle或Codepen中重现您的问题吗?这个问题可能需要访问更多的CSS(即'bestof'和'card'类)。 – JRulle 2015-01-26 20:32:47

+0

@JRulle现在可以做 – 2015-01-26 20:35:41

+1

另外,如果你只是并排放置两个div,它是否能够在没有'ng-repeat'的情况下正确渲染? – 2015-01-26 20:37:47

回答

2

我想你想确保.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 a row ..

http://bootply.com/mv0T7iZHrX

+0

这个,或者适当地应用Bootstrap的'clearfix'类。 – isherwood 2015-01-26 20:46:51

+0

@Skelly谢谢,这两种方法都做到了,我会坚持使用.row类,然后:) – 2015-01-26 20:57:05