Question

我有一个带按钮的Bootstrap模态。当我点击按钮时，它会在按钮下方显示。它包含一个带有锚链接的ul列表。

问题在于，如果我没有将高度设置为更高的值，那么在模态内部最后的项目不是可见的，因为div在模态之外。

我不想使用溢出因为我不希望它滚动。模态内部是一个下拉菜单，我自己做了。

用于：

的CSS

.wrapper-for-dropdown {
width: 300px;
z-index:9999;
color: #333;
background-color: #fff;
position: absolute;
display: none;
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: #ccc;
z-index:32432423432;
overflow-wrap:normal;
 }

.wrapper-for-dropdown:hover {
    border: solid;
    border-width: 1px;
    border-color: #ccc;
}
.dropdown-ul {
list-style-type: none;
-moz-st color: white;
text-align: left;
padding-left: 10px;
overflow-y: visible;
}
.dropdown-ul li {
float: left;
display: inline-block;
height: auto;
width: 250px;

}
.dropdown-ul li:hover {
}
.dropdown-ul li a {
    color: #38546d;
    display: block;
    float: left;
}

.dropdown-ul li a:hover {
        color: black;
        display: block;
        float: left;
    }

HTML: 

 <!-- Modal -->
            <div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true">
                <div class="modal-dialog" id="createNewSyncDialog">
                    <div class="modal-content" style="">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync
                            </h4>
                        </div>

                        <!-- Model Body -->
                        <div class="modal-body" >
                            <div class="container-fluid">
                                <div class="modal-content-div">
                                    <label>Company:</label>
                                    <label>Sync Reason:</label>
                                </div>
                                <div class="modal-content-div-data">
                                    <button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button>
                                    <div id="wraptest" class="wrapper-for-dropdown">
                                        <ul id="ulcompanies" class="dropdown-ul">

                                        </ul>
                                    </div>
                                    <input type="text" />
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button>
                                    <button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button>
                                </div>
                            </div>
                        </div>
                        <!--End Of Modal Body -->
                    </div>
                </div>

！[GUI的当前示例。意大利和国际不可点击。] [1]

[1]意大利和国际不可点击：http://i.stack.imgur.com/uVcLj.jpg

Answer 1

添加

.modal {overflow: visible}

解决了这个问题。不要向.model-body添加任何其他内容。

在我自己的div上删除一些其他样式也解决了这个问题。将高度设置为自动。

感谢。

bootstrap模态溢出问题

1 个答案: