zurb基础故障排序移动和堆叠导致表单输入无法点击

Question

我正在使用zurb基础来帮助我建立一个网站响应.这个想法是在更大的屏幕上标题看起来应该是这样的(它确实如此):

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

而这在较小的屏幕上(它没有):

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

有两个问题.首先,移动设备实际上看起来像这样:

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

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

有趣的是,搜索按钮仍显示,并且是可点击的,即使它应该不会出现,并且是在相同的形式搜索栏.

我正在尝试用zurb基金会做什么？我真的,真的想避免使用两种不同的搜索表单...

---

我将zurb foundation的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>

提前感谢任何提示或建议!

Answer 1

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

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

您需要结合使用移动列和源排序以及媒体查询来实现您想要的功能.

注意:该示例使用HTML/CSS版本,而不是Ruby/SASS版本.但这并不影响代码的工作方式.