如何使用col並排顯示2張圖像？

Question

我使用Angularjs，我想顯示並排2個圖像側，然後下一行未來2個圖像等等.....

Img1 Img2 
Img3 Img4 

我的代碼，

<section id="content"> 
<div class="content-wrap"> 
    <div class="container clearfix "> 
     <div id="posts" class="small-thumbs topmargin-sm"> 
      <div data-ng-repeat="partner in adminPartnersList"> 
       <span class="col-sm-6 col-md-6" data-ng-if='percent($index) == 0'> 
        <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=""> 
         <ul class="entry-meta clearfix"> 
          <li><a ui-sref="edit-partners({'partnerId':partner.partner_id})"><i class="edit-faq-icon icon-edit"></i></a></li> 
          <li><a href="#" data-ng-click="deletePartner(partner._id, $index)"><i class="delete-faq-icon icon-trash2"></i></a></li> 
         </ul> 
       </span> 
       <span class="col-sm-6 col-md-6" data-ng-if='percent($index) == 1'> 
        <img img-cache class="image_fade mgnbtm" ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=" "> 
         <ul class="entry-meta clearfix"> 
          <li><a ui-sref="edit-partners({'partnerId':partner.partner_id})"><i class="edit-faq-icon icon-edit"></i></a></li> 
          <li><a href="#" data-ng-click="deletePartner(partner._id, $index)"><i class="delete-faq-icon icon-trash2"></i></a></li> 
         </ul> 
       </span> 
      </div> 
     </div> 
    </div> 
    <span class="col-xs-12 text-center text-danger" data-ng-show="isShowNoPartnersMsg"> 
     No partners were found. 
    </span> 
    <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center"> 
     <pagination total-items="totalItems" data-ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage" class="pagination-sm" boundary-links="true" data-ng-change="onAdminPartnerPageChanged()"></pagination> 
    </span> 
</div> 

我動態顯示數據，可以在任何一個請幫我謝謝。

Answer 1

股利試試這個

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.test = ["image1", "image2", "image3", "image4", "image5", "image6", "image7", "image8", "image9", "image10"] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <section id="content"> 
 
    <div class="content-wrap"> 
 
     <div class="container clearfix"> 
 
     <div id="posts" class="small-thumbs topmargin-sm"> 
 
      <div class="entry clearfix" data-ng-repeat="t in test"> 
 
      <div ng-if="($index + 1)%2==0" style="border-bottom:1px solid red;padding:5px"> 
 
       <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{test[$index]}}" alt="{{$index}}" style="border-right:1px solid red;padding-right:5px;" > 
 
       <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{test[$index+1]}}" alt="{{$index + 1}}"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center"> 
 
     </span> 
 
    </div> 
 
    </section> 
 
</div>

Answer 2

看到帶有class = 「COL-SM-12」

<section id="content"> 
<div class="content-wrap"> 
    <div class="container clearfix"> 
     <div id="posts" class="small-thumbs topmargin-sm"> 
      <div class="entry clearfix" data-ng-repeat="partner in adminPartnersList"> 
       <div class="col-sm-12"> 
       <div class="col-sm-6" data-ng-if="percent($index) == 0"> 
        <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=""> 
       </div> 
       <div class="col-sm-6" data-ng-if="percent($index) == 1"> 
        <img img-cache class="image_fade mgnbtm" ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=" "> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
    <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center"> 
     <pagination total-items="totalItems" data-ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage" class="pagination-sm" boundary-links="true" data-ng-change="onAdminPartnerPageChanged()"></pagination> 
    </span> 
</div> 
</section> 

Answer 3

使用col-sm爲小屏幕和col-md中等大小的屏幕。此外，只使用img src一次

<div class="entry clearfix row" data-ng-repeat="partner in adminPartnersList"> 
    <div class="col-sm-6 col-md-6" data-ng-if="percent($index) == 0"> 
      <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt="" /> 
    </div> 
</div>