html - 使用 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));
 }

}

产生这个：

但是，当我尝试使用 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

您不是只是将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));
  }
}

输出：

Answer 2

您可以将每个容器的 span-columns() 设置为每个网格的一半以下，然后将您从每个容器中获取的剩余值移动并 shift() 每个容器远离左侧/右侧，如下所示：

html:

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

萨斯/sccs：

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


}

或者也许使用方向上下文混合来切换＃2的方向......

萨斯/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 的 RIGHT 侧直接在中间接触右 div 的 LEFT 侧，那么我相信这两种解决方案会起作用如果你和他们玩一会儿。。

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

Answer 3

你可以做类似@include span-columns(6 of 12,block-collapse)