Question

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

在导航栏上，我放置了一个bootstrap-ui下拉列表。当它被点击并显示时，它会被Toolbox 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>

隐藏着周围div溢出的Bootstrap-ui下拉列表

1 个答案: