如何防止foundation 5.x top-bar变宽100%

Question

目前，我正在试图找到一种方法来缩小顶栏的范围，类似于row在默认情况下所做的事情(即使视区是宽屏桌面，也要保持宽度固定)。

我可以通过一个简单的div类row + div class large-12列包装nav类的顶部栏来实现这个功能，但是...看起来我应该/可以让它工作，而不必用这种方式包装它。有没有人能帮我降低下面这些东西的复杂性？

*注自定义类my- -the -thing用于在顶部保持相同的背景颜色(本质上相同的颜色顶部栏设置)

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

Answer 1

如果需要行和列的属性，可以使用it..Ex:默认情况下是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>  

​