如何防止基础5.x顶栏宽度100％

Question

目前我正在尝试找到一种方法将顶栏的范围缩小到默认情况下会执行的操作（即使视口是宽屏桌面也保持宽度固定（ish））

我可以用一个简单的 div 类行 + div 类 large-12 列来包装导航类顶栏，但是......似乎我应该/可以让它工作而不必包装它以这种方式。任何人都可以帮助降低我下面的复杂性吗？

*note - my-custom-thing 类用于保持顶部的背景颜色相同（基本上相同的颜色顶部栏设置）

<div class="my-custom-thing">
  <div class="row">
    <div class="large-12 columns">
      <nav class="top-bar"></nav>
    </div>
  </div>
</div>

Answer 1

如果你想要行和列的属性，你可以使用它。例如：max-width of row:62.5 em 默认和padding of columns

它看起来不错，我认为它看起来也不复杂。

但是，如果您只是拥有这些类来控制宽度，我建议使用以下解决方案。

.my-custom-thing .top-bar {
      width: 100%;
      max-width: 62.5rem; 
      height:30px;
      background-color:#555;
      margin:0px auto;
    }

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>

<div class="my-custom-thing">
      <nav class="top-bar"></nav>
</div>