Bourbon/Neat: сбросить маржу и разрешить вложенные divs всю ширину

Question

Я новичок в Bourbon/Neat. У меня есть вопрос относительно гнездования: я хочу, чтобы красные ящики заполняли всю ширину, без желоба между ними. При использовании на них «@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