Zurb Foundation顶部酒吧，右侧部分包裹在第一个

Question

与此帖类似 A Top Bar with 2 navigation rows - Zurb Foundation 5

和这个例子 http://jsfiddle.net/Ty3ZT/6/

我想在右侧有一个搜索表单，搜索框更长（默认值很小）。由于屏幕尺寸较小，我希望包含搜索表单的第二部分包裹在第一部分下面，以使顶部条形成高度的两倍。

以下是我最喜欢的方式：

这就像我得到它一样接近。 （不确定为什么搜索输入与按钮的高度不同，它们在我的本地安装上） http://jsfiddle.net/Ty3ZT/18/

 <div class="fixed">
    <nav class="top-bar hide-for-small expand" data-topbar>        
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My Site</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <!--first row-->

        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="has-dropdown"><a class="">Account</a>
                  <ul class="dropdown">
                      <li><a>Item 1</a></li>
                      <li><a>Item 2</a></li>
                      <li><a>Item 3</a></li>
                  </ul>
                </li>          
            </ul>           
        </section>

        <!--second row-->

        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="right">
                <li class="has-form">
                    <div class="row collapse">
                        <div class="large-8 columns">
                            <input type="text" placeholder="Search here">
                        </div>
                        <div class="large-4 columns">
                            <a href="#" class="button expanded">Search</a>
                        </div>                
                </li>                    
            </ul>           
        </section>


    </nav>
</div>

我怎样才能做到这一点？每当我得到第二部分来包装时，搜索表格都搞砸了。按钮不再内联。