Bootstrap下拉列表的z-index在模态窗口底部显示

Question

我在使用Bootstrap时遇到了一些样式问题。

我有一个包含下拉列表的小型模态窗口。然而，我似乎无法让下拉列表显示在窗口的页脚之上。

我已经尝试过调整下拉列表的z-index，确保它比窗口更高，但没有成功。

有人能建议我应该改变什么吗？

HTML代码：

<div class="modal hide fade" id="store-modal">
<div class="modal-header">
    <h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
    <p>
        Please select the store you are working from
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    @foreach (var model in Model)
                    {
                        <li>
                            <a href="#" class="store" data-id="@Html.DisplayFor(modelItem => model.StoreId)">@Html.DisplayFor(modelItem => model.StoreName)</a>
                        </li>
                    }
                </ul>
            </div>

    </p>
</div>
<div class="modal-footer">
</div>

- Diver Dan

---

你能粘贴一些HTML和CSS吗？ - Панайот Толев

也值得检查父容器是否设置了overflow: visible。 - S..

Answer 1

你只需添加一个类，该类具有具有高于模型框页脚的属性z-index。

为了使z-index起作用，您还需要将position = relative、absolute或fixed。另外，将z-index设置为5000可能会有所帮助。（模态框可能具有高于2000的z索引）。

因此，在您的CSS中，我会添加以下内容：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body类具有overflow-y: auto属性。您可能需要将其更改为：

.modal-body {
    overflow-y:visible;
}

- Rubyist

Answer 2

如果您要设置下拉菜单的z-index，请确保它已定位。这意味着它必须具有position:absolute、position:relative或position:fixed其中之一。

- Kevin Bowersox

---

嗨，Kevin。在发布之前，我确实尝试过设置position: relative;，但它只是拉伸了窗口。 - Diver Dan