基础顶栏元素溢出和破裂答案

【问题标题】：Foundation top-bar elements overflowing and breaking基础顶栏元素溢出和破裂
【发布时间】：2016-03-04 03:10:02
【问题描述】：

我正在使用 Foundation 6 和 MEAN 堆栈。我正在使用 Gulp 访问 sass 变量。但是在我设置完所有内容后，顶部栏现在溢出并且不在其父元素内。

这就是它的样子：

如您所见，top-bar-left 和 top-bar-right 元素都没有留在它们的父元素内。我的导航代码几乎与 Foundation 文档中提供的顶部条形码相同。注意我尝试用 Foundation 站点中的代码替换我的代码，但问题没有解决。让我相信问题不在于 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 进行格式化，所以我不知道为什么会出现这种情况。有什么想法吗？？？？

【问题讨论】：

标签： html css sass zurb-foundation gulp-sass

【解决方案1】：

我似乎无法以任何我尝试的方式重现您的问题...

也许您的项目缺少 Foundation 的某些 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>

【讨论】：

【解决方案2】：

其他地方有一些用于 ul 的 css（边距、填充）？使用开发者工具寻找这类东西。

[编辑] 谁反对这条评论？为什么？

【讨论】：