调整引导程序中面板的位置

Question

I am told to make a shopping cart website using bootstrap with the images of products positioned in two rows and with three panels in each row 我被告知要使用引导程序创建一个购物车网站，并将产品图像放置在两行中，每行中包含三个面板
Although here i have coded for only one panel with the image within it,the main problem that I am facing is to adjust the position of panel which is always appearing on the top of the page. 尽管在这里我只为其中一个图像编码了一个面板，但是我面临的主要问题是调整总是出现在页面顶部的面板的位置。
I tried to enclose it in a div with id posi and then tried to position it using but it didn't work so please help.Further the image is appearing too big so what is the best method to re-size it so that the image responsiveness remains intact.I also have another question which is written in my code snippet(as a comment) if anybody knows the answer of that kindly help. 我试图用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

You need to set the position for top to take effect. 您需要设置top position才能生效。

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div id="wrapper"> <div class="container"> <div class="row"> <div class="col-sm-4"> <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 class="col-sm-4"> <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 class="col-sm-4"> <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 class="row"> <div class="col-sm-4"> <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 class="col-sm-4"> <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 class="col-sm-4"> <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>

调整引导程序中面板的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-19 17:02:38

调整引导程序中面板的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-19 17:02:38

解决方案1
1 已采纳 2015-08-19 17:02:38