css - Zurb Foundation 菜单 - 桌面和移动 View 的单独对齐

Question

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

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