如何将滚动条仅用于模态体在引导模态对话框 [英] How to put scrollbar only for modal-body in bootstrap modal dialog

问题描述

我有以下元素

<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> 

它显示模态对话框，类似这样，基本上它把滚动条放在整个模态对话框而不是模态包含我要显示的内容。

It shows modal dialog something like this, basically it puts scroll bar around entire modal-dialog and not modal-body that contains the content I am trying to display.

图片看起来像这样 - http ：//imgur.com/0ZZRjnJ

Image looks something like this - http://imgur.com/0ZZRjnJ

如何让滚动条仅围绕模态体？
我试图分配style =overflow-y：scroll; max-height：85％; margin-top：50px; margin-bottom：50px;

How do I get scrollbar around only modal-body? I have tried to assign style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" to modal-body and that didn't work.

推荐答案

您必须设置 height 中的 .modal-body ，并给它 overflow-y：auto 。还要将 .modal-dialog 溢出值重置为初始。

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.

查看工作示例：

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;
}

这篇关于如何将滚动条仅用于模态体在引导模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！