nanoGallery 显示错误

Question

我正在用 Bootstrap 4 为一个组织构建一个简单的静态网站。我有一个图库页面，使用 JQuery 库 'nanoGallery' 从 Flickr 中提取相册。

我正在使用 Bootstrap 4.1.3，
JQuery3.3.1
nanoGallery 5.10.3（或者 nanoGallery 的第 1 版）

我遇到的问题是，当您 select 相册时，图像位于图库名称（用于导航的图库名称）的顶部。此图像几乎显示了问题：

这是我的 jquery 代码：

$(document).ready(function () {
        $("#nanoGallery1").nanoGallery({
            userID:'182126395@N08',kind:'flickr',thumbnailWidth:'auto',thumbnailHeight:180,  //110,
            thumbnailGutterWidth: 10,
            thumbnailGutterHeight: 20,
            maxItemsPerLine: 4,
            theme: 'light',
            viewerDisplayLogo:true,
            locationHash:false,
            thumbnailLabel:{ display:false}, 
            thumbnailLazyLoad:true,
            colorScheme:'light',
            level1: { thumbnailWidth: 200, thumbnailHeight: 120 }
            });
      });

关于如何修复布局有什么建议吗？

Answer 1

所以实际问题是我的主要 CSS 站点有一个名为 "Separator" 的 class，同时 JQuery nanoGallery 库也有同名的 class - nanoGallery 从我的主 CSS 加载 class，而不是从它自己的 CSS.

因此，在重命名 class 并更改其所有引用之后 - 它工作正常。

这是它正常工作时的外观图。实际上，我在调试问题时生成了这张图片 - 通过不加载主站点的 CSS。

nanoGallery 显示错误

nanoGallery display bug

jquery

bootstrap-4

nanogallery