Bootstrap 下拉列表 z-index 显示在模态窗口页脚下 [英] Bootstrap dropdownlist z-index displaying under modal window footer
问题描述
我在使用 bootstrap 时遇到了一些样式问题.
我有一个包含下拉菜单的小模态窗口.但是我似乎无法让下拉菜单显示在窗口的页脚上.
我使用了下拉菜单的 zindex 以确保它高于 windows,但没有运气.
谁能建议我应该改变什么?
HTML
</p>
<div class="modal-footer">
您只需添加一个具有 z-index
作为属性的类,其属性高于模型框页脚.
要使 z-index 起作用,您还必须设置 position = relative、absolute 或 fixed.此外,将 z-index 设置为 5000 之类的内容可能会有所帮助.(模态的 z 指数可能高于 2000 年.
所以在你的 css 中我会添加这个:
.class-of-dropdown {位置:相对;z-索引:5000;}
.modal-body 类有一个 overflow-y: auto 属性.您可能需要将其更改为:
.modal-body {溢出-y:可见;}
I am having some styling problems with bootstrap.
I have a small modal window containing a dropdown. However I can't seem to get the dropdown to display over the footer of the window.
I have played with the zindex of the dropdown ensuring it was higher than the windows but no luck.
Can anyone suggest what I should be changing?
The 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>
You just add a class having z-index
as attribute having higher than model box footer.
For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal may have z index higher than the 2000's.
so in your css i would add this:
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body class has a overflow-y: auto property. You might need to change this to:
.modal-body {
overflow-y:visible;
}
这篇关于Bootstrap 下拉列表 z-index 显示在模态窗口页脚下的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!