Question

我在让3张图片彼此相邻时遇到问题。我使用带有角度的ng-repeat来输出前3个图像，但无论我如何弄乱网格的大小，它们都是相互叠加的。关于如何将图像彼此相邻的任何建议。

HTML

<!DOCTYPE html>
<html ng-app='formApp'>

<head>
    <title>Bicycle App</title>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link href="app.css" rel="stylesheet">

</head>

<body>
    <div class="header">
        <div class="container">
            <div class='row'>

                <div class='col-md-12'>

                    <i class="fa fa-bicycle" aria-hidden="true"><span>&nbsp;{{"Bike Shop"}}</span></i>
                </div>
            </div>
        </div>
    </div>
    <div class="container">


        <div class="row">

            <div class="col-md-offset-3 col-md-6">
                <!-- end class not needed -->
                <div class="chooseTitle">
                    Choose Your Bicycle
                </div>
            </div>
            </div>
            <div class="row">
 <div class="col-md-3"> 
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">

                <div ng-repeat ="product in products | limitTo: -3">
              {{product.manufacturer}}
                <img class="img-responsive" ng-src="{{product.image}}" ></div>
                </div><!--End controller-->
                </div><!--end col-md-3-->

                </div><!--end row-->
        </div> <!--end container-->







    <script src="bower_components/angular/angular.js"></script>
    <script src="app.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bikeimageslider.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
</body>

</html>

app.js

var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){



$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
}, 
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'

},
{   

    manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{

    manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{

    manufacturer: "Framed",
image: 'images/bike5.jpg'
},
{
manufacturer: "Windsor",
image: 'images/bike6.jpg'
}
];
/*
$scope.LeftArrowClick =function(selectedIndex){
if (products[selectedIndex] = products[-1]){
products[selectedIndex] = products[6];

}

};
$scope.increment =0;
$scope.RightArrowClick =function(selectedIndex){
$scope.selectedIndex++;
    $scope.selectedObject = $scope.products[selectedIndex];

if ($scope.products === 7){
$scope.products = 0;

}
};
*/

}]);

Answer 1

您正在对跨越3个街区的列进行重复。你的图片不适合那个空间，这就是他们被堆积起来的原因。

尝试这样的事情：

<div class="row">
    <div class="products" ng-controller="BikeController">
        <div ng-repeat ="product in products | limitTo: -3">
            <div class="col-md-3"> 
                {{product.manufacturer}}
                <img class="img-responsive" ng-src="{{product.image}}" >
            </div>
        </div><!--End controller-->
    </div><!--end col-md-3-->
</div><!--end row-->

使用此功能，您将创建3列，每个图像对应一列。希望它有所帮助！

Answer 2

将此课程img-responsive从<div class="col-md-3 img-responsive">添加到<img>元素，如下所示：

<img class="img-responsive" ng-src=/>

Bootstrap网格将图像放在彼此之上

2 个答案: