卸下边缘嵌套的柱子，并用波旁威士忌整洁

Question

如何从两列中删除边缘，其中嵌套偏移列内部的列。我想确保列的内容始终居中，并且我似乎无法使用@include row (table); mixin进行工作。

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

您的意思是这个差距？

CSS

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