Question

我是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>

Answer 1

Bootstrap的柱系统基于十二个基础。例如，如果您想要两个宽度相等的列，则两个列都为.col-sm-6，因为宽度为6的两列等于十二列。同样，您可以有三个相等的.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。您需要考虑左（空）列，中心div（x列宽）和右（空）列。

JSFiddle

Bootstrap图像大小和居中

1 个答案: