在标签内放置缩略图

我正在使用angularjs来呈现我的html并使用引导程序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>

来源

2014-08-30 user1206480

重复了'COL-SM-2'，而不是它的内容 – charlietfl 2014-08-30 22:01:15

你在重复锚点。您需要重复列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>

来源

2014-08-30 22:02:30 isherwood

哇，我累了，哈哈！ – user1206480 2014-08-30 22:28:17

在标签内放置缩略图

回答

相关问题