我有以下元素:
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
它显示类似这样的模式对话框,基本上,它将滚动条放在整个modal-dialog
并不是modal-body
其中包含我要显示的内容。
图像看起来像这样:
如何获得滚动条modal-body
only?
我尝试过分配style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"
to modal-body
但没有成功。
你必须设置height
of the .modal-body
并给予它overflow-y: auto
。也重置.modal-dialog
溢出值至initial
.
请参阅工作示例:
http://www.bootply.com/T0yF2ZNTUd http://www.bootply.com/T0yF2ZNTUd
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 80vh;
overflow-y: auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)