Question

我正在使用angularjs来渲染我的html并使用bootstrap 3来设置它的样式。选项卡正确呈现，但每个选项卡中的图像不显示在网格中，而是在一列中逐个输出。我做错了什么？

    <div class="col-sm-12">

    <!--Nav Tabs-->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="{{'#' + retailProducts[0].Category}}"
                              role="tab" data-toggle="tab">
                               {{retailProducts[0].Category}}
                           </a></li>
        <li ng-repeat="pro in retailProductsMinusFirst">
            <a href="{{'#' + pro.Category}}" role="tab" data-toggle="tab">
                {{pro.Category}}
            </a>
        </li>
    </ul>

    <!--Tab Panes-->
    <div class="tab-content">
        <div class="tab-pane active" id="{{retailProducts[0].Category}}">
            <div class="row">
                <div class="col-sm-2">
                    <a ng-repeat="pro in retailProducts[0].Products" href="#"
                       class="thumbnail">
                        <img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
                             alt="Product Photo" />
                    </a>
                </div>
            </div>

        </div>
        <div ng-repeat="pro in retailProductsMinusFirst" class="tab-pane" 
             id="{{pro.Category}}">
            <div class="row">
                <div class="col-sm-2">
                    <a ng-repeat="img in pro.Products" href="#" class="thumbnail">
                        <img src="{{img.Product.PrimaryPhotoUrl + '?height=100'}}" 
                             alt="Product Photo" />
                    </a>
                </div>
            </div>

        </div>
    </div>

</div>

Answer 1

你正在重复锚点。您需要重复列div。像这样：

<div ng-repeat="pro in retailProducts[0].Products" class="col-sm-2">
    <a href="#" class="thumbnail">
        <img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
        alt="Product Photo" />
    </a>
</div>

将缩略图放在标签内

1 个答案: