如何使用col并排显示2张图像？

Question

I am using Angularjs and I want to display 2 images side by side and then next 2 images in next row and so on.....

Img1 Img2
Img3 Img4

My code,

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

I am displaying data dynamically,can any one please help me thanks.

Answer 1

see the div with 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 2

Try this

 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 3

Use col-sm for small screens and col-md for medium sized screens. Also, use img src only once

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