波本/整潔：重置邊距，讓嵌套的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