问:AngularJS,我如何将图像放入我的背景div?

时间:2016-12-29 09:30:02

标签: angularjs twitter-bootstrap-3

我想把一些图片放到我的背景div中。 我预计这5个图像文件将在“.well”类的div中,但它们只是从那个div中传播开来。所以,这是我的问题。
如何将这些图像文件稳定地放入 .well div? 我的代码和结果如下:

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

The result from my code

1 个答案:

答案 0 :(得分:1)

使用row添加well课程。像这样

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

row类是列的容器。行为列提供了一个存放的位置,理想情况下具有最多为12的列。它还充当包装器,因为所有列都向左浮动,其他行不在当花车变得怪异时,它会重叠。