ng-repeat 내의 부트 스트랩 그리드 시스템

Question

bootstrap의 그리드 시스템을 사용하여 ng-repeat 지시어의 결과를 포맷하려고하므로 반환되는 각 항목은 사용 가능한 12 개의 열 중 6 개를 차지합니다. 잘 작동하지만 스타일에 문제가 있습니다.

<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 : 이것은 HTML입니다

.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 반복을 둘러싸는 전에 중지 할 것, 그래서 나는 바로 내 <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