波旁威士忌/整洁:重置边距，让嵌套的 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

或者这个：

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

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

Answer 2

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

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

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

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