html - 使用 Bourbon Neat 删除 span 列上的边距

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));
 }

}

产生这个:

但是当我尝试使用 table 方法让两列相互嵌套/对接时，如他们的示例所示，我得到了这个:

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

您是否只是将内容“This is the container”的 p 放错了地方，以至于它不小心被用作表格单元格，但您实际上希望它位于容器上方？

将它放在 .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>

科学:

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));
  }
}

输出: