如何使Bootstrap下拉菜单显示在模态框底部而不是导致模态框溢出？

Question

我已创建一个模态框，允许用户添加闹钟。一个闹钟可以有多个不同类型的通知，因此我希望用户通过下拉菜单选择他想要的通知类型。

你可以在这里查看（不完全工作的）演示：http://jsfiddle.net/renatoargh/teX7Y/ 我正在使用的Bootstrap版本是2.3.2。

基本上发生的情况如下所示：

1- 初始状态 2- 错误状态，下拉菜单使模态框溢出而不是在其上方显示 我尝试将ul#dropdown-menu的z-index设置为巨大值，但似乎没有起作用。我还尝试更改display属性，但没有成功。

有人能帮帮我吗？ 编辑 向上打开下拉菜单（dropup）也不是一种选择，因为问题会在屏幕重新调整到桌面大小时出现；http://jsfiddle.net/hashem/teX7Y/1/

- Renato Gama

---

你的添加通知链接在fiddle中似乎无法工作。 - Lokesh Suthar

是的，你说得对！我不确定为什么它在fiddle上无法工作，我正在尝试修复它！相同的代码在本地可以工作！ :/ - Renato Gama

@renatoargh 很抱歉，由于下拉菜单相对于模态框主体定位，除非您将其定位为“fixed”并通过JavaScript调整“top”/“left”属性，否则无法实现。但是，您可以在“添加”链接上方打开下拉菜单，如：http://jsfiddle.net/hashem/teX7Y/1/ - Hashem Qolami

@HashemQolami 谢谢您的建议，我会尝试您的想法！向上打开也不是解决方案，因为当屏幕调整大小时，同样的问题会发生！ - Renato Gama

Answer 1

你只需给你的modal-body添加另一个类。

 <div class="modal-body girlLookAtThatBody">

当然了

 .girlLookAtThatBody{
    overflow-y:inherit !important;
}

所以请检查一下：

http://jsfiddle.net/uUvyy/

希望这有所帮助！

- Bryce Easley

---

谢谢，解决了！我最终遇到了另一个问题，但更容易解决。当向模态框添加更多内容时，它无法保持在模态框内。我只需用另一个 div 包围新内容，并将其 overflow-y 设置为 auto 即可。 - Renato Gama