zurb foundation trouble ordering mobile and stacking causes form input to be unclickable

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/13640954/zurb-foundation-trouble-ordering-mobile-and-stacking-causes-form-input-to-be-unc

标签

css

Sass

zurb-foundation