Foundation 5 顶栏全宽，但包含在网格中的元素内部

【问题标题】：Foundation 5 Top Bar full width, but inside elements contained to gridFoundation 5 顶栏全宽，但包含在网格中的元素内部
【发布时间】：2018-02-25 22:55:43
【问题描述】：

我正在使用 Foundation 5 的顶部栏，我希望栏是全宽的，但实际的导航链接要包含在网格中。我希望导航项与正文对齐。

我尝试在导航中添加一行和/或列。我尝试在导航中使用.contain-to-grid，但似乎没有任何效果。

这是我要查看的代码笔：http://codepen.io/eladrin201/pen/BNGroR

【问题讨论】：

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

您应该用.contain-to-grid 将导航包裹在外面，而不是在里面。

<div class="contain-to-grid"> <!-- Wrap -->
 <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"></li>
    <!-- Rest of code -->
  </ul>
 </nav>
</div>

默认 CSS

.contain-to-grid .top-bar { /* Targets the descendant/child element */
    margin: 0 auto;
    max-width: 62.5rem;
}

Updated CodePen

【讨论】：

完美。无论出于何种原因，我认为这将包含整个栏，而不仅仅是导航项目。感谢您的帮助。