Удалить вложенные столбцы с Bourbon Neat

Question

Как удалить поле из двух столбцов с вложенными столбцами смещения внутри них. Я хочу убедиться, что содержимое внутри столбца всегда сосредоточено, и я не могу заставить его работать, используя mixin @include row (table);.

codepen

HTML-

<section> 
    <div class="container"> 
    <div class="col"> 
     <div class="inner"> 
     centered content 
     </div> 
    </div> 
    <div class="col"> 
     <div class="inner"> 
     centered content 
     </div> 
    </div> 
    </div> 
</section> 

SCSS

@import "bourbon"; 
@import "neat"; 

section{ 
    @include outer-container(100%); 

    .container{ 
     @include span-columns(12); 
     @include fill-parent; 

    .col{ 
     @include span-columns(6); 
     border: 2px solid black; 

     .inner{ 
     @include shift-in-context(1 of 6); 
     @include span-columns(8 of 12); 
      background: red; 

     } 
    } 
    } 
} 

Answer 1

Там есть вариант, встроенный в аккуратные. Это смесь reset-display(). Сбросьте его из таблицы в блок в классе .inner, и я думаю, что вы в хорошей форме.

section { 
    @include outer-container(100%); 

    .container { 
    @include row(table); 
    @include fill-parent; 

    .col { 
     @include span-columns(6); 
     border: 2px solid black; 

     .inner { 
     @include reset-display; 
     @include shift-in-context(1 of 6); 
     @include span-columns(8 of 12); 
     background: red; 
     } 
    } 
    } 
} 

Answer 2

Вы имеете в виду this разрыв?

CSS

.col{ 
    @include span-columns(6); 
    border: 2px solid black; 
    margin-right: 0; 
    width: 50%;