0

我无法让列与基础的 sass 版本一起使用。

我正在尝试在一行中创建 4 列。

父级设置为一行。四个孩子被赋予了这个规则：

@include grid-column(3)

我的期望是这应该创建四列，因为12 / 4 = 3.

但是，最后一列不在行中，并且留下了一个间隙。这里发生了什么？

这是我所拥有的：

我的 sass 来源：链接

生成的html/css：JsFiddle

编辑：如果我链接到 jsfiddle 而不在此处粘贴代码，stackoverflow 会生成错误。所以这是我的html：

 <section id="main-content"

        <section id="looptest">

          <h2>foundation/sass columns</h2>

          <div id="blocks">

            <div class="block">
              <p>block one</p>
            </div>
            <div class="block">
              <p>block two</p>
            </div>
            <div class="block">
              <p>block three</p>
            </div>
            <div class="block">
              <p>block four</p>
            </div>

          </div><!-- ENDS #blocks -->

     </section><!-- ENDS #looptest -->

  </section>  <!-- main-content ends -->
4

1 回答 1

0

您应该设置#blocks为@include grid-rowonly。相反，您将其设置为也@include grid(12)。看起来你也在嵌套这个.block类。这也可能导致问题。

考虑它与演示类的关系。这一点尤其重要，因为展示类实际上是由相同的 sass 和 sass mixin 生成的。

例如，使用展示类，它应该看起来像这样

<div class="row" id="blocks">
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
</div>

所以，你的 sass 应该模仿同样的结构。现在它可能看起来像这样（减去嵌套）：

<div class="row large-12 columns" id="blocks">
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
    <div class="large-4 columns block"></div>
</div>

还要记住，如果你使用嵌套网格，你总是需要一个rowdiv 来包围你的columns

所以一个简单的 3 列布局会是这样的：

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

最简单的sass是：

#blocks
  @include grid-row
.block 
  @include grid-column(4)
于 2013-09-22T08:53:24.247 回答