Bourbon/Neat: Setzen Sie den Rand zurück und lassen Sie verschachtelte Divs über die gesamte Breite gehen.

Question

Ich bin neu in Bourbon/Neat. Ich habe eine Frage bezüglich der Verschachtelung: Ich möchte, dass die roten Kästchen die ganze Breite ausfüllen, ohne eine Rinne zwischen ihnen. Wenn Sie "@include omega" verwenden, entfernt die erste Box den Rand rechts, aber die rechte Box hat immer noch den Rand und passt ihre Breite nicht an.

Können Sie mir sagen, wie ich sie die gesamte Eltern-Box ohne einen Abstand zwischen ihnen überspannen kann?

Hier ist eine Demo: http://wuergeengel.net.dd13736.kasserver.com/

Hier ist mein Markup:

<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> 

Hier meine Stile sind:

.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

ein paar Möglichkeiten gibt, die Sie dies tun können .

• Verwenden Sie das Tabellenlayout von Neat. zB: @include span-columns(5 of 8, table);

• Verwenden Sie die zu Grunde liegenden Funktionen flex-grid und flex-gutter von Neat. zB:

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

Answer 2

Oder diese:

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

See: http://neat.bourbon.io/docs/#span-columns