Question

我被告知使用bootstrap创建一个购物车网站，产品图像分为两行，每行有三个面板
虽然这里我只编写了一个带有图像的面板，但我面临的主要问题是调整面板的位置，该面板始终出现在页面顶部。
我试图将它封装在一个带有id posi的div中，然后尝试使用它来定位但是它没有用，所以请帮助。此外，图像看起来太大，所以最好的方法是重新调整大小以便图像响应性保持不变。我还有另一个问题写在我的代码片段（作为评论），如果有人知道这种帮助的答案。

<!DOCTYPE HTML>
<html>
	<head>
		<title>
		Web page
		</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<style>
			#posi
			{
				position=absolute;
				top=100px;
				right=50px;
			}
		</style>
	</head>
	<body>
	<div id="posi">
	<div class="container">
		<div class="row" >
			<div class="col-md-3 col-md-6" ><!--Although I have used this col-md-3 col-md-6 but I also want to know 
			what happens when we specify two column definitions in a single class like this-->
				<div class="panel panel-default" >
					<div class="panel-heading panel-primary">
						Iphone 6
					</div>
					<div class="panel-body">
						<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923" class="img-responsive" />
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

Answer 1

您需要设置position的{{1}}才能生效。

＆＃13;

top

＆＃13;

body,
html {
  background: grey;
}
#wrapper {
  top: 100px;
  right: 50px;
  position: absolute;
  background: lightblue;
}

＆＃13;

调整自举中面板的位置

1 个答案: