2015-05-16 39 views
0

我有一組縮略圖,每次水平顯示3個。當我的瀏覽器低於988像素時,即使有足夠的空間,3個水平縮略圖也會垂直放置。任何想法如何避免這種情況?您列元素早期破解的縮略圖

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

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

+0

如果使用col-sm- *而不是col-md- *,會發生什麼? – jarz

+0

好的建議。謝謝!這使得它工作到772.縮略圖雖然很小,但我認爲他們應該能夠保持水平甚至更長。還必須做其他的事情。 – calthoff

+0

您可以使用col-xs,它會向上傳播,所以它相當於有col-xs col-sm col-md col-lg。我想知道如果引導程序不指定給定網格層的值,引導程序不知道該怎麼做。 – jarz

回答

1

你可以使用

col-xs-* 

,將向上傳播,所以它相當於擁有。