我有以下元素
<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>
它显示模态对话框这样,基本上它把滚动条围绕整个模态对话框,而不是模态体,包含我想显示的内容。
图像看起来像这样 – http://imgur.com/0ZZRjnJ
如何让滚动条只有模态体?
我试图分配style =“overflow-y:scroll; max-height:85%; margin-top:50px; margin-bottom:50px;到模态体,并没有工作。
解决方法
你必须设置.modal体的高度,并给它overflow-y:auto。也将.modal-dialog溢出值复位为初始值。
查看工作示例:
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: 250px; overflow-y: auto; }