Foundation 5 Top Bar全宽，但内部元素包含在网格中

Question

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

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

以下是我的codepen：http://codepen.io/eladrin201/pen/BNGroR

Answer 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