调整引导程序中面板的位置
[英]Adjust position of panels in 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>
1 个解决方案
解决方案1
1 已采纳 2015-08-19 17:02:38
您需要设置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>
如何调整Bootstrap的工具提示的位置？
[英]How do i adjust the position of a Bootstrap's Tooltip for a certain element?
Bootstrap Datepicker在小浏览器屏幕上调整位置和大小
[英]Bootstrap datepicker adjust position and size on small browser screen
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.