如何选择子元素的宽度列数？

Question

当我在另一列中设置元素的列时，它使用的总列数不是父列中的列数。 e.g。

<div class="therow">
  <div class="acolumn">
    <div class="achildcolumn">
       <!-- my content goes here -->
    </div>
  </div>
</div>

$total-columns: 12 ;

.therow {
  @include grid-row();
  .acolumn {
    @include grid-column(9);
    .achildcolumn {
      @include grid-column(7);
    }
  }
}

所以我想.achildcolumn占据7/9列，但似乎是7/12。

Answer 1

这是预期的结果。每个子网格也使用$total-columns。这可以防止您在嵌套时添加列。

<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-6 columns">
        50% width
      </div>
      <div class="small-6 columns">
        50% width
      </div>
    </div>
  </div>
</div>

如果您希望更精细地使用嵌套列，可以选择将$total-columns更改为24，甚至是36.然后您可以对子列进行超精细控制。