調整引導程序中面板的位置
[英]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.