用波本邦整潔去除毛邊嵌套列

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

有內置在整潔的選項。這是mixin的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%;