使用偏移在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>