基础5 - Navbar集中化

时间:2014-02-12 16:37:14

标签: zurb-foundation navbar

早上好,

我想知道是否有可能对当前基础5导航栏进行更改而不会破坏移动和桌面视图。

基本上当前的左侧文本/图像位于最左侧,导航菜单位于最右侧,这在设计跨越整个页面时非常好,但如果内容集中在中间类似正常的960网页布局,有时看起来有点奇怪。

是否可以将左图像/文本和导航菜单链接集中在中心,就像在960px包装中一样。

这一切都没有停止它的响应性。

由于

1 个答案:

答案 0 :(得分:1)

听起来你想要完成的是将一个顶栏导航集中在一行中。

如果是这种情况,那么您可以使用<div class="contain-to-grid">将顶栏保留在网格布局中,并使<div class="small-9 small-centered columns">之类的内容将顶栏所在的行居中。我创建了一个codepen您可以在此处查看示例:http://cdpn.io/jJhyn

上述课程都是基金会的一部分,因此您不会影响设计的响应能力。

有关可自定义顶栏的选项的完整列表,请参阅Zurb Foundation Top Bar文档。

如果我误解了您的问题,请告诉我,我们一定会感谢代码。

我希望有所帮助。


编辑:02/13/2014

当我偶然发现这个时,我正在研究另一个问题,How to center top-bar nav?。它的中心是顶栏内的按钮/链接,而不是顶部栏本身。他们用作例子的页面是Mister Dutch。我更新了上面的codepen以反映我在基金会论坛上发现的内容。

同样,如果我误解了你的问题,请告诉我。