全尺寸搜索顶部酒吧为Zurb基金会的小型

Question

我正在做类似的顶栏：

http://foundation.zurb.com/page-templates4/workspace.html

只有要求在较小的设备上，我喜欢隐藏所有内容，只显示全宽的搜索栏。我使用.hide-for-small .title-area a和其他人使用“隐藏”工作但我无法弄清楚正确的方式使搜索栏变为全宽大小即可。我不要想破解。

我尝试将.row和.small-12 .large-12 .columns放在.top-bar-section下，但这只是搞砸了。我相信行/列不应该在top-bar中使用？

这是期望的结果：

我有什么选择？我自定义top-bar吗？或者是否有一些类强制top-bar-section的全宽？

Answer 1

您是否尝试将top-bar包裹在div class contain-to-grid中？

A Full-Width Centered Navigation Top Bar - Zurb Foundation