使用Bourbon Neat去除跨度柱上的边距

Question

我开始使用Thoughtbot的Bourbon Neat来响应网格。总的来说，它非常漂亮，我真的很喜欢它，但我还是挂了一个小问题。

我试图让两个列在没有边距的情况下彼此相邻，但在尝试复制他们的示例后，我得不到相同的结果。

以下是HTML示例：

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

这是我的SCSS：

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

产生这个：

但是当我尝试使用表格方法将两列相互嵌套/对接时，我得到了这个：

SCSS：

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

输出：

如果我使用@include omega();路线，但它不会扩展最后一列的整个宽度：

SCSS：

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

输出：

基本上，我可以省略容器部分中的内容，它会产生一些产生我正在寻找的结果的内容。但是为了实现这个目的，创建空div是否必要？：

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML（.container中的内容已注释掉）：

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

输出：

无论如何，我不知道实现这个目标的“正确”方法是什么。该文档并不具体用于解释如何使两列相互嵌套。从我试图在他们的例子中复制的内容并没有产生相同的结果。

除非我需要在最后一栏专门添加margin:0;。

Answer 1

您是不是错误地将p放错了内容＆＃34;这是容器＆＃34;，因此它意外地被用作表格单元格，但您实际上希望它高于容器

将其置于.container之上并且有效：

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

SCSS：

section {
  @include outer-container;
  text-align: center;
}

.container {
  @include fill-parent;
  @include row(table);

  .col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
  .col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
}

输出：

Answer 2

您可以为每个容器设置span-columns（），每个容器的位数小于每个网格的一半，然后移动从每个容器中取出的剩余值，并将每个容器从左/右侧移开（），如此：

HTML：

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

SASS / SCCS：

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

或者可以使用direction-context mixin来切换＃2 ...

的方向

SASS / SCCS：

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

我不确定我是100％跟随你的问题，但是如果你的意思是你不能让左边的右边的一边直接碰到正确的div的左侧，我认为这两个解决方案将会如果你和他们一起玩的话，你可以工作......

让我知道它是如何工作的~gl！

Answer 3

您可以执行类似@include span-columns（6 of 12，block-collapse）

的操作