2

我在使用语义网格混合时遇到了一些问题。如果我遗漏了一些明显的东西，我很抱歉，但我寻求你的帮助。我有以下代码：

索引.html

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

应用程序.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);
4

1 回答 1

0

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 列（8）；} #search { @include 列(4); 跨度{@包括列（3）；} 输入 { @include 列（9）；} } .inner-row { @include innerRow(collapse); } }

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

于 2013-11-11T11:46:52.493 回答