Question

我在使用语义网格mixin时遇到了一些麻烦。如果我错过了一些明显的东西，我很抱歉，但我寻求你的帮助。我有以下代码：

的index.html

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <span class="prefix">#</span>
      <input type="text">
  </div>
</header>

app.scss

header { @include outerRow();
  #logo { @include column(8); }
  #search { @include column(4); @include innerRow(collapse);
    span { @include column(3); }
    input { @include column(9); }
  }
}

这适用于屏幕宽，但前缀在窄模式下会拉伸到全宽。我是这次冒险的新手，但是我相信它会在狭窄的屏幕上自行重新计算，或者我是否需要@media才能正常工作？

新发布图片，所以这里是链接：

宽（正确） - http://imgur.com/dtsGtxM

狭窄（foofed） - http://imgur.com/jX4D1NU

编辑：解决方案似乎是：

span { @include column(3); @include mobileColumn(1); }
input { @include column(9); @include mobileColumn(3); }

虽然我不完全理解它。仍然不确定是否可以接受在列中调用新的嵌套行，如下所示，但它似乎有效：

#search { @include column(3); @include innerRow(collapse);

Answer 1

Foundation使用媒体查询的默认断点为768px。

因此，在较大的设备上查看时，它使用column（）mixin，然后在较小的屏幕尺寸上使用mobileColumn（）mixin。

此外，设置div（在您的情况下，＃search为列和内部行将产生意外结果。您应该将列包装在单独的内部行容器中：

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <div class="inner-row">
          <span class="prefix">#</span>
          <input type="text">
      </div>
  </div>
</header>

和

标题{@include outerRow（）; #logo {@include column（8）; } #search {@include column（4）; span {@include column（3）; } 输入{@include column（9）; } } .inner-row {@include innerRow（collapse）; } }

http://foundation.zurb.com/old-docs/f3/media-queries.php

如何在Foundation中使用语义网格？

1 个答案: