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>

使用偏移在Bootstrap中居中图像

1 个答案: