5

这个完全把我难住了。我调整了我的 css，因此通过将开始和结束位置更改为相同，常规引导模式只是淡入而不滑动：

.modal.fade.in {
    top: 50%;
}
.modal {
    top: 50%;
}

这导致了一个很好的渐进外观。

我想为 Bootstrap Image Gallery 创建的图像库模态实现相同的效果，它扩展了 bootstrap 的 modal.js。可以在这里找到。虽然它在功能方面非常吸引人，但在一周的时间里，我使用 js 和 css 都无济于事来简化转换。对于我的生活，我无法弄清楚如何让每张图像淡入，而是在适当的位置而不是向下或滑过，这真的很让人分心。

我所能做的就是删除“淡入淡出”类以完全消除过渡。我原以为我为其他模态所做的 css 更改也将应用于画廊模态，但事实并非如此。我也浏览了 bootstrap.js 的源代码，无法弄清楚。我不是一个完整的 nube，但远非 js/css 专家，需要帮助。谢谢！

4

1 回答 1

1

我会从 Chrome 开发者工具或 Firebug 开始，看看为什么你的 CSS 规则被覆盖了。在带有 Chrome 的 Mac 上，当您位于要检查的元素顶部时，按住控件并单击鼠标/滚动框（这将打开一个对话框，您将在其中单击“检查元素”）。这将打开开发人员工具，该工具将以蓝色突出显示您单击的元素，在本例中为.modal-gallery.

我刚刚检查了这个 modal-gallery 上的源代码，并在 CSS 中注意到 bootstrap.min.css:682 中的这段代码：

.modal.fade.in {
   top: 50%;
}

可以通过 bootstrap.responsive.css:10 中的以下代码在调整屏幕大小时覆盖：

modal.fade.in {
  top: auto;
}

另一个建议是检查 bootstrap-image-gallery.css 文件，因为画廊.modal-gallery应用了一个在 Twitter Bootstrap 本身中不存在的类。

于 2012-05-04T02:32:07.493 回答