Question

我无法使用sass版本的基础来使用列。

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

父级设置为一行。四个孩子都有这个规则：

@include grid-column(3)

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

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

这就是我所拥有的：

我的sass来源：LINK

产生的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 -->

Answer 1

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

考虑与表象类的关系。这一点尤其重要，因为表达类实际上是由同样的sass和sass mixins生成的。

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

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

另请注意，如果您使用嵌套网格，则始终需要row div来封闭columns

所以一个简单的3列布局就像这样：

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

最简单的意思是：

#blocks
  @include grid-row
.block 
  @include grid-column(4)

如何在sass版本的基础中使用排水沟设置列？

1 个答案: