缩略图图片早破

时间:2015-05-16 01:48:34

标签: html css angularjs

我有一组水平显示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>

1 个答案:

答案 0 :(得分:1)

您可以使用

col-xs-* 

会传播,所以它等同于:

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

在您的列元素上。