Question

我正在使用angularjs使用ng-repeat在同一行输出自行车。无论我如何弄乱col-3-md / col-4-md或我设置的任何东西，我似乎无法让左箭留在同一排。它目前看起来像附加的图像。它怎么能在一条线上得到它。我正在尝试建立一个旋转木马来循环播放图像。

的index.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>
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">
                <div class="row">
                <div class="leftArrow"><img ng-src="images/leftarrow.png"></div>
                  <div class="col-md-3" ng-repeat="product in products | limitTo:-4">
                  {{product.manufacturer}}
                  <img id="bikePic" ng-src="{{product.image}}">
                  </div>
</div>


                </div><!--End controller-->




    </div>



    <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>
</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'
}
];


this.form = {};
this.addForm = function(product){

};

}]);

将图像拟合到网格中的同一行

0 个答案: