Zurb Foundation 菜单 - 桌面和移动视图的单独对齐

Question

对于我的 Zurb 菜单，我希望它在桌面视图中居中对齐 - 为此，我使用了以下代码：

nav.top-bar {
text-align:center;
}
section.top-bar-section {
display: inline-block;
}

问题是，它还在移动模式下将菜单居中。我希望移动模式保持与左侧对齐。这可能吗？谢谢！

Answer 1

您需要使用css media queries。你可以这样做：

@media only screen and (max-width : 320px) {
  nav.top-bar {
    text-align:left;
  }
}

确保将此样式添加到原始样式下方，以便它可以覆盖它。查看一些 media queries for standard devices