Bootstrap 4 ряда не соответствует среднему

Question

Я пытаюсь получить содержание в <div class="col-md-2 col-lg-2"> в середине, чтобы выровнять к середине, но безрезультатно. Я знаю, что установка столбцов на размер 2 не будет заполнять пространство сетки из 12 столбцов, но я хочу, чтобы она была выровнена по середине независимо.

<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="content-header">Header</h1> 
     <div class="row"> 
      <div class="col-md-2 col-lg-2"> 
       content 
      </div> 
      <div class="col-md-2 col-lg-2"> 
      content 
      </div> 
     </div> 
    </div> 

Answer 1

нашел трюк CSS, который работает

.row-centered { 
    text-align: center; 
} 

.col-centered { 
    display: inline-block; 
    float: none; 
    /* reset the text-align */ 
    text-align: left; 
    /* inline-block space fix */ 
    margin-right: -4px; 
} 

Answer 2

Bootstrap 4, как Bootstrap 3, использует offset переместить или центр целые колонны. Поэтому в вашем случае используйте offset-*-4, чтобы переместить его на 4 столбца в сетке с 12 столбцами.

<div class="row"> 
     <div class="col-lg-12 text-xs-center"> 
      <h1 class="content-header">Header</h1> 
      <div class="row"> 
       <div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4"> 
        content 
       </div> 
       <div class="col-md-2 col-lg-2"> 
        content 
       </div> 
      </div> 
     </div> 
    </div> 

Для центрирования встроенных элементов (например, текст), использование: text-center (это было text-center в 3.x)

Для центрирования блока элементов (например, DIV) или столбцов, используйте: mx-auto (это был center-block в 3.x)

Демо: http://www.codeply.com/go/Wxzbd3a6og

Есть также новый responsive alignment classes в Bootstrap 4, так что вы могут выровняться по-разному на разных контрольных точках.