Центрирование изображений в Bootstrap с помощью смещений

Question

В верхней части страницы с использованием Bootstrap 3 я пытаюсь центрировать 3 изображения, помещая их во вложенные столбцы в столбце смещения. Они в конечном итоге выглядят смещенными, но не центрированными (под этими изображениями находится jumbotron, и, очевидно, они не центрированы над jumbotron). Столбец смещения имеет ширину 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>