css - 在 Bootstrap 中使用不均匀偏移使内容居中

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>