Foundation 5 Top Bar 全宽,但内部元素包含在网格中
Foundation 5 Top Bar full width, but inside elements contained to grid
我正在使用 Foundation 5 的顶部栏,我希望栏是全宽的,但实际的导航链接要包含在网格中。我希望导航项与正文对齐。
我尝试在导航中添加一行 and/or 列。我试过在导航中使用 .contain-to-grid
,但似乎没有任何效果。
这是我要看的codepen:http://codepen.io/eladrin201/pen/BNGroR
你应该用 .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;
}
我正在使用 Foundation 5 的顶部栏,我希望栏是全宽的,但实际的导航链接要包含在网格中。我希望导航项与正文对齐。
我尝试在导航中添加一行 and/or 列。我试过在导航中使用 .contain-to-grid
,但似乎没有任何效果。
这是我要看的codepen:http://codepen.io/eladrin201/pen/BNGroR
你应该用 .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;
}