html - Bootstrap-ui 下拉菜单隐藏在周围的 div 溢出中

Question

我有一个导航栏标题，其中包含右对齐的各种元素。我已将溢出设置为隐藏在周围的 div(工具箱)上，这样如果屏幕大小发生变化，标题将隐藏在左侧品牌 div 下。

在导航栏上，我放置了一个 bootstrap-ui 下拉菜单。单击并显示时，它会被工具箱 div 的溢出截断。如果我删除溢出，它显示正常，但我有一个问题，即在缩小的屏幕尺寸上会看到溢出。

如何在缩小时隐藏所有导航栏内容的同时显示下拉菜单？

plunkre

<div id="ToolBox">
    Some really important text that shouldn't wrap with a reduced width screen
    <span class="dropdown" dropdown on-toggle="toggled(open)">
    <a href class="dropdown-toggle" dropdown-toggle>
        Period:{{currentPeriod.Description}}
    </a>
    <ul class="dropdown-menu">
        <li id="periodSelector" ng-model="currentPeriod" ng-repeat="period in periodList track by period.PeriodId">
            {{period.Description}}
        </li>
    </ul>
</span>

    <div id="SiteTitle" class="ng-binding">myApp</div>
  </div>

Answer 1

添加 dropdown-append-to-body 属性应该可以解决这个问题。请参阅文档 here了解详情。

编辑

更新了 plunk here

<span class="dropdown" dropdown dropdown-append-to-body>