Миниатюры с ранними фотографиями

Question

У меня есть группа миниатюр, отображающих 3 по горизонтали. Когда мой браузер опускается ниже 988 пикселей, 3 горизонтальные миниатюры идут вертикально, хотя есть много места. Любая идея, как этого избежать?

<div class="container"> 
<!-- main photo and description units --> 
<div class="mainUnit" ng-repeat="product in sc.display" ng-init="outerIndex = $index"> 
    <div class="row col-md-offset-3"> 
     <div class="col-md-8"> 
      <div class="aboveImage" ng-model="sc.store.products"> 
       {{product.sale_title}} picked out by <span class="pink">{{product.fashionista.full_name}}</span><br> 
      <div><i>{{product.fashionista.location}}</i> {{product.released_at | date}}</div><br> 
       <img class="mainImage" ng-src="{{sc.ci_array[$index].image}}"> </img><br> 
       {{product.user}} | <span class="pink">{{product.sale_price | currency}}</span> 
      </div> 
     </div> 
    </div> 
    <!-- thumbnails --> 
    <div class="row col-md-offset-4" ng-repeat="list in sc.final_thumb_array[outerIndex]"> 
      <ul id="navlist"> 
       <li class="col-md-2" ng-repeat="img in list" ng-click="click(img)"> 
        <img class="thumbnail" ng-src="{{img.image}}"/> 
       </li> 
      </ul> 
    </div> 
    <div class="row col-md-offset-4"> 
     <div class="description col-md-6"> 
      <p>{{product.sale_description}}</p> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете использовать

col-xs-* 

, который будет распространяться вверх, так что это эквивалентно тому, что:

"col-xs-* col-sm-* col-md-* col-lg-*" 

на вашем элемента столбца.