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

Question

我有一个导航栏 header，其中右对齐有各种项目。我已将溢出设置为隐藏在周围 div（工具箱）上，这样如果屏幕尺寸发生变化，header 会隐藏在左侧品牌 div 下。

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

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

<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>

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

Bootstrap-ui dropdown hidden with surrounding div overflow

html

css

angular-ui-bootstrap