波本/整洁：重置边距，让嵌套的div跨越整个宽度

Question

我是波旁/整洁的新手。我有一个关于嵌套的问题：我希望红色框填充整个宽度，而不在它们之间存在间隙。当在他们身上使用“@include omega”时，第一个框会删除其右侧的边距，但右侧框仍然有边距并且不会调整其宽度。

你可以告诉我如何让他们跨越整个父框而没有任何边距吗？

这里有一个演示：http://wuergeengel.net.dd13736.kasserver.com/

这里是我的标记：

<div class="container"> 
    <div class="box box-left"></div> 
    <div class="box box-right"> 
    <div class="box-red-left nested"></div> 
    <div class="box-red-right nested"></div> 
    </div> 
</div> 

这里是我的风格：

.container 
{ 
    @include outer-container; 
} 

.box 
{ 
    border: 1px solid black; 
    height: 500px; 
} 

.box-left 
{ 
    @extend .box; 
    @include span-columns(4); 
} 

.box-right 
{ 
    @extend .box; 
    @include span-columns(8); 

    .nested 
    { 
    border: 1px solid red; 
    height: 400px; 


    &.box-red-left 
    { 
     @extend .nested; 
     @include span-columns(3 of 8); 
     @include omega; 
    } 

    &.box-red-right 
    { 
     @extend .nested; 
     @include span-columns(5 of 8); 
     @include omega; 
    } 
    } 
} 

Answer 1

有几个方法可以做到这一点。

• 使用Neat的表格显示布局。例如：@include span-columns(5 of 8, table);

• 使用Neat的基础flex-grid和flex-gutter函数。例如：

  width: flex-grid(5, 8) + flex-gutter(8); 
  float: left; 
  

Answer 2

或者这样：

@include span-columns(5 of 8, block-collapse) 

参见： http://neat.bourbon.io/docs/#span-columns