Question

我遇到了一个非常基本的问题，即使用Sass / Compass在基础4中使用列。

在屏幕尺寸大于$ small媒体查询断点（768px）时，我希望两列宽度相等（每列6列）并且彼此相邻。现在，在屏幕尺寸大于$ small的情况下，每列仅占据页面的左半部分，第二列在第一列下方撞击。

我尝试过使用Foundation的类而不是Sass mixins，但我得到了相同的结果。我也尝试重置为基础默认设置和导入，但没有任何变化。

我有以下HTML：

<section>
  <div class="header">
    <h1>Sample text here.</h1>
  </div>
  <div class="content">
    <p>Sample text here.</p>
  </div>
</section>

我正在使用以下SCSS：

section {
  @include grid-row;
}

.header {
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

.content {
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

以下是缩减测试用例的链接：http://bit.ly/149zpEq

红色柱和绿色柱应在屏幕尺寸大于768px时并排放置。唉，他们不是。

Answer 1

使用此标记，无需任何额外的sass代码：

<section class="row">
    <div class="large-6 medium-6 small-12 columns">
        <div class="header">
            <h1>Sample text here.</h1>
        </div>
    </div>
    <div class="large-6 medium-6 small-12 columns">
        <div class="content">
            <p>Sample text here.</p>
        </div>
    </div>
</section>

您只需为大于$ small的屏幕添加'large-6'和'medium-6'，并为小屏幕添加'small-12'。

Answer 2

将你的Sass改为此。

.header {
  display: table-cell;
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

.content {
  display: table-cell;
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

显示：它自己的表是不够的，子元素必须有display：table-cell。

另一种选择是

section > div{
  display: table-cell;
}

Zurb基金会 - Sass专栏没有留在排队

2 个答案: