使用偏移量在 Bootstrap 中居中图像

Question

在使用 Bootstrap 3 的页面顶部，我试图通过将 3 个图像放置在偏移列内的嵌套列中来使它们居中。它们最终看起来是偏移的，但没有居中（在这些图像下方有一个大屏幕，显然它们不在大屏幕上方居中）。偏移列的宽度为 6，偏移 3 - 但未居中。

这是我的代码：

<div class="container">

  <div class="row">
    <div class="col-md-6 col-md-offset-3 center">

    <div class="row">
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
    </div>
  </div>
</div>
</div>


<div class="container">
<div class="jumbotron">
      <h1>Hello World</h1>
      <p>Hello everybody</p>
    </div>
</div>

Answer 1

有两种方法可以实现这一目标。如果要保留偏移量，请将进行嵌套的列更改为 12：

 <div class="row">
<div class="col-md-12 col-md-offset-3 center">

<div class="row">
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
</div>
</div>
</div>

另一种方法是在两侧放置两个空白列。

<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-4  text-center">
   <div class="row">
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
   </div>
 </div>
<div class="col-md-4"></div>
</div>