Question

假设我在页面上有一个引导程序面板。有没有办法让面板中的下拉列表的内容完全可见。我遇到问题，面板的溢出会切断部分下拉菜单。我不希望面板为其内容调整大小，而是按照您期望的那样行事：

<div class="panel panel-default">
    <select>
        <option>...</option>
        ...
    </select>
</div>

除了Bootstrap样式下拉内容。有什么建议吗？

Answer 1

如果您的面板位于面板组内，则可以覆盖默认溢出属性。在Bootstrap核心中存在以下规则：

.panel-group .panel {
    overflow:hidden;
}

所以你应该覆盖它：

.panel-group .panel {
    overflow:visible;
}

Answer 2

Bootstrap下拉列表的z-index应该允许它覆盖面板..

http://www.bootply.com/Owj9ZxXgYL

<div class="panel panel-default">
    <div class="panel-heading">Title</div>
    <div class="panel-body">
        <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          Menu
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Choice1</a></li>
          <li><a href="#">Choice2</a></li>
          <li><a href="#">Choice3</a></li>
          <li class="divider"></li>
          <li><a href="#">Choice..</a></li>
        </ul>
      </div>
    </div>
</div>

您正在使用其他一些下拉菜单吗？

Answer 3

我通过创建自己的类来解决问题，该类复制了面板的外观而没有隐藏溢出。无论我对z-index做了什么，它都没有改变内容仍然隐藏的事实。

Answer 4

重申AaronF的说法，更改下拉列表的z-index将无法解决此问题。它与面板上的bootstrap设置的overflow:hidden属性有关。我不太明白它是如何产生这个问题的，但是如果你将.panel-group .panel { overflow: visible; }添加到自定义css中，下拉列表将按预期显示在面板顶部。

这可能会在您的应用中的其他地方造成未知的副作用，因此我会在.panel-group之前添加一个类选择器，以使其与问题区域隔离。

面板隐藏的Bootstrap下拉列表

4 个答案: