2016-12-29 3 views
3

私は背景のdivにいくつかの画像を入れたいです。 私はこれらの5つのイメージファイルが ".well"クラスのdivに入ると予想しましたが、それらはそのdivから広がっていました。だから、私の質問です。
これらの画像ファイルを安定して配置するにはどうすればよいですか.well div? wellrowクラスを追加しますQ:AngularJS、背景のdivに画像を配置するにはどうしたらいいですか?

<!doctype html> 
 
<html ng-app="exampleApp"> 
 
\t <head> 
 
\t \t <script src="angular.js"></script> 
 
\t \t <link href="bootstrap.css" rel="stylesheet"></link> 
 
\t \t <link href="bootstrap-theme.css" rel="stylesheet"></link> 
 
\t \t <script> 
 
\t \t \t angular.module("exampleApp", []) 
 
\t \t \t .controller("exampleCtrl", function($scope){ 
 
\t 
 
\t \t \t $scope.data = [ 
 
\t \t \t \t { movie:"Pandora", date:"2016-12-07", img:"pandora.gif" }, 
 
\t \t \t \t { movie:"Lalaland", date:"2016-12-07", img:"lalaland.gif" }, 
 
\t \t \t \t { movie:"Willyoubethere", date:"2016-12-14", img:"willYouBeThere.gif" }, 
 
\t \t \t \t { movie:"brother", date:"2016-11-23", img:"brother.gif" }, 
 
\t \t \t \t { movie:"Animal", date:"2016-11-16", img:"fantasticAnimalDictionary.gif" } 
 
\t \t \t ]; 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </head> 
 
\t <body ng-controller="exampleCtrl"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="well"> 
 
\t \t \t \t <div class="col-md-2" ng-repeat="data in data"> 
 
\t \t \t \t \t <img ng-src={{data.img}} /> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

The result from my code

+1

"well" class cssが見えますか? –

+0

ウェルクラスのCSSを証明したら、私たちは助けてくれるでしょう –

答えて

1

: そこに私のコードですと下になります。このよう

<div class="well row"> 
    <div class="col-md-2" ng-repeat="data in data"> 
     <img ng-src={{data.img}} /> 
    </div> 
</div> 

rowクラスはcolumns.The行のコンテナである理想的にすべての列が左、追加の行を浮くので、それはまた、ラッパーとして機能する12まで追加の列を持つ、列に住む場所を提供します浮動小数点が奇妙になるときに重複しないでください。

+0

素晴らしいです。それは本当にうまくいく。このような状況で「行」機能は何をしますか? – moon

+0

そして、ありがとう。 – moon

+0

私は答えを更新します。チェックしてください。 – Ahmar

関連する問題