html - 基础顶部元素溢出和破坏

我用的是6号基金会的平均水平。我用Gulp访问sass变量。但是，在我设置好所有内容之后，顶部的条现在已经溢出，不再停留在其父元素中。
这就是它的样子：

如您所见，左上栏和右上栏元素都不在其父元素内。我的导航代码几乎与基础文档中提供的顶部条形码相同。注意，我尝试将代码与基础站点中的代码交换，但问题没有解决。使我相信问题不在于HTML：

<header class="top-bar" data-topbar role="navigation">
 <div class="top-bar-left">
   <ul class="menu">
     <li class="menu-text"><a ui-sref-active="active" ui-sref="home">GoodThings</a></li>
     <li><a ui-sref="home">Home</a></li>
     <li><a ui-sref-active="active" ui-sref="profile">Profile</a></li>
     <li><a ui-sref-active="active" ui-sref="login" ng-show="!currentUser">Login</a></li>
     <li><a href="#/logout()" ng-show="currentUser">Logout</a></li>
   </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li>
        <input type="search" placeholder="Search">
      </li>
      <li>
        <button type="button" class="button">Search</button>
      </li>
    </ul>
  </div>
</header>

我现在几乎没有用sass格式化，所以我不知道为什么会坏。有什么想法吗？???

最佳答案

我似乎无法用任何方式重现你的问题我试图。。。
可能您的项目缺少某些SASS文件作为基础。
您可以尝试将.top-bar-left和.top-bar-right包装在.row.column中以包含它？

<header class="top-bar" data-topbar role="navigation">
  <div class="row column">
    <div class="top-bar-left">
    ...
    </div>
    <div class="top-bar-right">
    ...
    </div>
  </div>
</header>

关于html - 基础顶部元素溢出和破坏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35787256/