Question

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

我能够通过简单的div类行+ div类大12列包装导航类顶栏来实现这个工作但是...似乎我应该/可以让这个工作没有以这种方式包装它。任何人都可以帮助降低我下面的复杂性吗？

*注意 - 类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>

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

1 个答案: