Bootstrap圖像大小調整和居中對齊

我是新來引導，我有一個問題試圖定位在頁面上的圖像。我正在嘗試使用引導程序網格將圖像放置在頁面的中心。我熟悉html5和我知道還有其他方法可以將圖像置於中心;但是，我想知道是否可以使用引導程序的網格系統完成此操作。這個例子的原因是，我有其他圖像位置的東西，我想使用bootstrap。Bootstrap圖像大小調整和居中對齊

當我在Windows 8桌面或iPad上運行下面的例子時，圖像非常小（即幾乎像一個圖標）並駐留在左上角;但是，當我在Nexus 5上運行此映像時，圖像的大小正確且居中。我已經包含了一些我正在使用的示例html代碼。

再一次，我是一些什麼新的引導，所以它可能是簡單的。任何輸入或建議非常讚賞提前

感謝您的幫助

<!DOCTYPE html>  
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Autoroute Login</title> 
<meta name="viewport" content="width=device-width, 
height=device-height,initial-scale=1.0"> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/ 
     3.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/ 
     css/bootstrap-responsive.css"> 
<style> 
    @media (min-width:@screen-sm-min){ 
    #main-image{ 
     height: 200px; 
     width:200px; 
     }   
    } 

    @media (min-width: @screen-md-min){ 
    #main-image{ 
     height: 350px; 
     width: 350px; 
     } 
    } 

</style> 

</head> 
<body> 

    <div class="container"> 
    <div class="row"> 
    <div class="col-sm-2 col-md-2"/> 
    <div id="main-image" class="col-sm-8 col-md-8"> 
     <img src="img/ar-main-image.jpg" alt="Autoroute Main Image" 
     class="img-responsive center-block"/> 
    </div> 
    <div class="col-sm-2 col-md-2"/> 
    </div>  
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/ 
      jquery.min.js" > </script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/ 
      bootstrap.min.js"></script> 

</body> 
</html>

來源

2014-05-14 shannonlal

引導的專欄體系奠定了十二的基座上。例如，如果您需要兩列寬度相等的列，您應該讓它們都爲.col-sm-6，因爲寬度爲6的兩列等於十二。同樣，您可以擁有三個相同的列，即.col-md-4列。

引導浮欄默認情況下離開了，也可以讓你通過一個特定的列數，以抵消他們：.col-md-offset-4

所以，如果你想有一個引導的div總是集中，你可以通過將其寬度設置爲任意偶數，從12中減去該數字並將偏移量設置爲該數字來實現。因此，對於一個居中的.col-2，由於5 + 5 + 2 = 12，所以可以給出5的偏移量。對於一個居中的.col-4，由於4 + 4 + 4 = 12，所以你會得到4的偏移量。您需要考慮左側（空白）列，中間div以及x列寬和右側（空白）列。

JSFiddle

來源

2014-05-14 04:03:34 Ceili

感謝您的回覆。我認爲這將解決中心問題;然而，我想知道你是否知道爲什麼我的桌面和iPad上的圖像顯示得非常小（即像一個圖標），而在我的Nexus 5上，圖像顯示正常。我已經在頁面頂部指定了媒體定義，但似乎沒有工作。 – shannonlal

Bootstrap圖像大小調整和居中對齊

回答

相關問題