Bootstrap сетки динамические столбцы

Question

У меня есть следующая таблица на моей странице:

<table> 
    <tr> 
     <td ng-repeat="Type in Types">  
       <img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" /> 
     </td> 

    </tr> 
</table> 

Я хочу использовать самозагрузки сетку вместо таблицы. Так что, если было 3 изображения на странице, я бы:

<div class="row"> 
    <div class="col-md-4"> </div> 
    <div class="col-md-4"> </div> 
    <div class="col-md-4"> </div> 
</div> 

Но так как количество изображений является динамическим (хотя она никогда не больше чем 12), я не могу использовать фиксированные номера в Col-мд *. Так что я должен был бы сделать что-то вроде этого:

<div class="row" ng-repeat="Type in Types"> 
    <div class="col-md-{{12/Types.length}}"> 
     <img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" /> 
    </div> 
</div> 

Но теперь у меня есть каждое изображение в отдельной строке, а не в колонке (один под другим). Как я могу получить их всех в одной строке?

Answer 1

Move ng-repeat к Col:

<div class="row"> 
    <div class="col-md-{{width}}" ng-repeat="Type in Types"> 
     {{$index}} 
    </div> 
</div> 

Plunk видеть в полноэкранном режиме