波旁/整洁：重置边距并让嵌套的div元素占据整个宽度

Question

我是Bourbon/Neat的新手。我有一个关于嵌套的问题：我希望红框填满整个宽度，没有间隔。当在它们上使用"@include omega"时，第一个框移除了其margin-right，但右边的框仍然有margin，没有调整其宽度。

请告诉我如何使它们跨越整个父元素而没有任何间距？

这是演示：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;
    }
  }
}

- christophe

Answer 1

这段文本没有需要翻译的内容，只是一个HTML代码块。

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

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

- Tim Abbott

Answer 2

您有几种方式可以实现这一点。

• Use Neat's table display layout. eg: @include span-columns(5 of 8, table);

• Use Neat's underlying flex-grid and flex-gutter functions. eg:

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

- Kyle Fiedler