ng-repeat中的自舉網格系統

我在嘗試使用引導程序的網格系統來格式化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>之後有一個底部邊框，但在任何內容實際顯示之前。任何想法發生了什麼？

來源

2015-01-26 Yasmina Lembachar

您可以在JSFiddle或Codepen中重現您的問題嗎？這個問題可能需要訪問更多的CSS（即'bestof'和'card'類）。 – JRulle 2015-01-26 20:32:47

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

另外，如果你只是並排放置兩個div，它是否能夠在沒有'ng-repeat'的情況下正確渲染？ – 2015-01-26 20:37:47

我想你想確保.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

來源

2015-01-26 20:44:56 ZimSystem

這個，或者適當地應用Bootstrap的'clearfix'類。 – isherwood 2015-01-26 20:46:51

@Skelly謝謝，這兩種方法都做到了，我會堅持使用.row類，然後:) – 2015-01-26 20:57:05

ng-repeat中的自舉網格系統

回答

相關問題