nanoGallery显示错误

Question

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

我正在使用Bootstrap 4.1.3，
jQuery 3.3.1
nanoGallery 5.10.3（否则为nanoGallery的第1版）

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

这是我的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”的类，同时还发现JQuery nanoGallery库也有一个同名的类-并且nanoGallery正在从我的主类加载该类CSS，而不是其自身的CSS。

因此，在遍历并重命名一个类并更改其所有引用后，它可以正常工作。

这是它正常工作时的外观图像。我实际上是在调试问题时生成此图片的-通过不为主要网站加载CSS。