1

我正在使用 zurb 基金会来帮助我使网站具有响应性。这个想法是标题应该在更大的屏幕上看起来像这样（确实如此）：

####### |------ Search ----------| %%%%%%%%%%%

这在较小的屏幕上（它没有）：

###### %%%%%%%%%%
|---- Search ---|

有两个问题。第一个是移动端实际上是这样的：

###### 
|---- Search ---|
       %%%%%%%%%%

第二个是搜索栏不可点击。我尝试更改 z-index 并使该行显示隐藏内容，但无济于事。对于布局，我尝试了推拉移动，但这只会让事情变得更糟。布局代码如下。

有趣的是，搜索按钮仍然显示，并且是可点击的，即使它不应该显示，并且与搜索栏的形式相同。

我想用 zurb 基础做的事情是可能的吗？我真的非常想避免使用两种不同的搜索表单...

我将zurb基础的scss变量更改为以下仅供参考

$totalColumns: 16;
$mobileTotalColumns: 8;
$columnGutter: 0;

我有一个像这样的标题：

<div class="row">
   <div class="three mobile-three columns"></div>
   <div id="search" class="eight mobile-eight columns">
      <div class="row">
         <div class="thirteen mobile-eight columns">
            <!-- text input for search -->
         </div>
         <div class="hide-on-phones hide-on-tablets three columns">
            <!-- Submit button for search -->
         </div>
      </div>            
   </div>
   <nav class="five mobile-five columns">
      <ul class="right">
         <li><%= link_to 'Teams', '#' %></li>
         <li><%= link_to 'Records', '#' %></li>
         <li><%= link_to 'Settings', '#' %></li>
      </ul>
   </nav>
</div>

提前感谢您的任何提示或建议！

4

1 回答 1

6

我在 git hub 上创建了一个项目来演示所需的行为。

https://github.com/EdCharbeneau/foundation-ordering-stacking-help

您需要结合使用移动列和源排序以及媒体查询来实现您想要做的事情。

注意：该示例使用 HTML/CSS 版本，而不是 Ruby/SASS 版本。但这不会影响代码的工作方式。

于 2012-12-01T17:06:10.627 回答