Question

使用Bootstrap 3，我试图将图像置于其自己的行上。这就是我所拥有的，它可以很好地响应显示尺寸：

<div class="row">
  <div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
     <img src="img.jpg" class="img-responsive">
  </div>                                        
</div>

但是，.img-responsive设置max-width：100％。某些显示器上的图像太大。例如，我宁愿col-lg-1而不是col-lg-2。

显然，我可以col-lg-1 col-lg-offset-5，但内容将偏离中心。

在此方案中是否有等效于col-lg-1 col-lg-offset-5.5或其他方法来集中内容？

Answer 1

我默认不说。但是可以使用Bootstrap customize，然后您可以使用@grid-columns定义自定义响应网格列。您可以指定16.

<div class="row">
  <div class="col-lg-2 col-lg-offset-7 text-center">
     <img src="img.jpg" class="img-responsive">
  </div>                                        
</div>

或者您可以将图像设置为较小的宽度。

<div class="row">
  <div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
     <img src="img.jpg" class="img-resize img-responsive">
  </div>                                        
</div>

<style type="text/css">
    .img-resize {
       width: 200px;
    }
</style>

使用不均匀的偏移量来固定Bootstrap中的内容

1 个答案: