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 回答