zurb 基金会麻烦订购移动和堆叠导致表单输入无法点击 [英] zurb foundation trouble ordering mobile and stacking causes form input to be unclickable

问题描述

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

####### |------ 搜索 ----------|%%%%%%%%%%%

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

###### %%%%%%%%%%|---- 搜索---|

有两个问题.第一个是移动版实际上是这样的:

######|---- 搜索---|%%%%%%%%%%

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

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

我想用 zurb 粉底做些什么?我真的，真的很想避免使用两种不同的搜索形式...

<小时>

我把zurb基础的scss变量改成以下仅供参考

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

我有一个这样的标题:

<div class="三个移动三列"></div><div id="search" class="八移动八列"><div class="row"><div class="十三个移动八列"><!-- 用于搜索的文本输入-->
<div class="hide-on-phones hide-on-tablets 三栏"><!-- 提交搜索按钮-->

<nav class="五移动五列"><ul class="right"><li><%= link_to 'Teams', '#' %></li><li><%= link_to 'Records', '#' %></li><li><%= link_to 'Settings', '#' %></li></nav>

预先感谢您提供任何提示或建议！

解决方案

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

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

您需要结合使用移动列和源代码排序以及媒体查询来实现您的目标.

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

I'm using zurb foundation to help me make a website responsive. The idea is that the header should look like this on larger screens (and it does):

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

And this on smaller screens (which it doesn't):

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

There are two problems. The first is that the mobile one actually looks like this:

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

And the second is that the Search bar is unclickable. I tried changing the z-index and making the row show hidden content, to no avail. For the layout I tried push and pull mobile, but that only made things a lot worse. Code for the layout is below .

Interestingly, the search button still shows up, and is clickable, even though it should not show up, and is in the same form as the search bar.

Is what I'm trying to do possible with zurb foundation? I really, really want to avoid having two different search forms...

---

I changed the scss variables for zurb foundation to the following just for reference

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

I have a header like so:

<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>

Thanks in advance for any tips or suggestions!

解决方案

I've created a project on git hub that demos the desired behavior.

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

You need to use a combination of mobile columns and source ordering plus a media query to achieve what you wanted to do.

Note: The example uses the HTML/CSS version, not the Ruby/SASS version. But that doesn't effect how the code works.

这篇关于zurb 基金会麻烦订购移动和堆叠导致表单输入无法点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！