ошибка отображения nanoGallery

Question

Я создаю простой статический сайт с Bootstrap 4 для организации.У меня есть страница Галереи, использующая библиотеку JQuery nanoGallery, которая извлекает альбомы из Flickr.

Я использую Bootstrap 4.1.3,
JQuery 3.3.1
nanoGallery 5.10.3 (в противном случае 1-я версия nanoGallery)

Проблема, с которой я столкнулся, заключается в том, что при выборе альбома изображения располагаются поверх названия галереи (название галереи для навигации).Это изображение в значительной степени отображает проблему:

И вот мой код 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 для основного сайта.