引导图像大小和居中答案

【问题标题】：Bootstrap Image Sizing and Centering引导图像大小和居中
【发布时间】：2014-07-01 21:38:15
【问题描述】：

我是 bootstrap 新手，尝试在页面上放置图像时遇到问题。我正在尝试使用引导网格将图像定位在页面的中心。我熟悉 html5，我知道还有其他方法可以使图像居中；但是，我想知道这是否可以使用 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>

【问题讨论】：

标签： html twitter-bootstrap image-size

【解决方案1】：

Bootstrap 的列系统以十二为基础布置。例如，如果您想要两列等宽，您可以将它们都设为.col-sm-6，因为两列宽度为 6 等于 12。同样，您可以拥有三个相等的 .col-md-4 列。

默认情况下，Bootstrap 会将列向左浮动，但也允许您将它们偏移特定数量的列：.col-md-offset-4

因此，如果您想要一个始终居中的 Bootstrap div，您可以通过将其宽度设置为任何偶数、从 12 中减去该数字并将偏移设置为该数字来实现。因此，对于居中的 .col-2，您将给出 5 的偏移量，因为 5+5+2=12。对于居中的 .col-4，您将给出 4 的偏移量，因为 4+4+4=12。您需要考虑左侧（空）列、x 列宽度的中心 div 和右侧（空）列。

JSFiddle

【讨论】：

感谢您的回复。我认为这将解决居中问题；但是，我想知道您是否知道为什么我的桌面和 iPad 上的图像显示得非常小（即像一个图标），而在我的 Nexus 5 上，图像显示正确。我已经在页面顶部指定了媒体定义，但它似乎不起作用。