Пустой div игнорируется для ответной сетки?

Question

Я работаю над статической, отзывчивой HTML-страницей.

Я сделал div с классом «row», а затем положил еще один div с классом «col-2», который пуст, а затем еще один div с классом «col-2», в котором есть текст. Этот текст должен быть отображен на 16,6% от левой части браузера. Однако это не так, если я не помещаю что-то внутри первого div с классом «col-2» - вместо этого он помещает этот текст в самую левую часть страницы, как будто у меня нет div с классом col -2 'перед этим.

Получаю, что, поскольку div пуст, он не отображается, но тогда, как я предполагаю использовать сетку?

Код:

<div class="section header">  
    <div class="row"> 
     <div class="col-2"></div> 
     <div class="col-2"> 
      Title 
     </div> 
    </div> 
</div> 

Answer 1

Все системы сетки имеют offset группу классов. Поиск в документах. Это должно быть что-то вроде col-offset-2, col-2-offset, col-2-o или col-o-2.

Если вы используете Bootstrap v4, вы ищете класс offset-2.

Код: Offsetting columns.

Answer 2

div s по умолчанию отображаются как блоки полной ширины. Если вы хотите col-2 класс для отображения рядный с заданной шириной, вам нужно объявить его как таковой:

.col-2 { 
    display: inline-block; 
    width: 16.66666% 
} 

пример: http://jsfiddle.net/dno5dzgL/5/