Создание адаптивного фильтра содержимого Javascript в Bootstrap - PullRequest
Новая
       9

Создание адаптивного фильтра содержимого Javascript в Bootstrap

0 голосов
/ 06 мая 2019

Я делаю свой веб-сайт портфолио и включил фильтр содержимого Javascript для разделов, но я не знаю, как сделать миниатюрные изображения адаптивными в нем.

Мне бы хотелось, чтобы он работал так, как если бы он находился в столбцах Bootstrap, располагая 4 на большом экране, 3 на рабочем столе и 1 на строку на мобильном телефоне.

Поймите, что настройка шириныотменяет отзывчивость, но не уменьшает размер.Я попытался нанести на него гибкую пленку, но безрезультатно.

Нужно ли искать другой скрипт или он может быть расположен по-другому?

Вот сайт:

Kimjensen.co.uk

Спасибо за любую помощь, которую вы можете предложить!

Вот CSS: 

.filterDiv { 
  float: left; 
  background-color: #F9F8F7; 
  color: #ffffff; 
  width: 350px; 
  line-height: 100px; 
  text-align: center; 
  margin: 2px; 
  display: none;
   }
.centredimages { 
     display: inline-block; 
     vertical-align:middle; 
     text-align:center; 
     width: 100%; 
     height: 100%; 
     margin-bottom:25px; 
   }

.fade {
   opacity: 1; 
   transition: opacity .25s ease-in-out; 
   -moz-transition: opacity .25s ease-in-out; 
   -webkit-transition: opacity .25s ease-in-out;
   }

.wrap { flex-wrap: wrap; justify-content: center; }

И некоторые из HTML:

<div class="wrap">
   <div class="containerfilter">

       <div class="filterDiv design"><a href="http://kimjensen.co.uk/Foodora2" 
       target="_parent"><img class="img-responsive centredimages fade" 
       src="http://kimjensen.co.uk/FoodoraThumb19.png" /></a></div>

       <div class="filterDiv play"> <a href="http://kimjensen.co.uk/3rd- 
       Dimension" target="_parent"><img class="img-responsive centredimages 
       fade" src="http://kimjensen.co.uk/WoodenStarThumb.png" /></a></div>
   </div>
</div>

А вот и JavaScript: 

filterSelection("all") function filterSelection(c) { 
    var x, i; 
    x = document.getElementsByClassName("filterDiv"); 

    if (c == "all") c = ""; // Add the "show" class (display:block) to the  filtered elements, and remove the "show" class from the elements  that are not selected 
  for (i = 0; i -1) 
    w3AddClass(x[i], "show"); 
   } 
  } // Show filtered elements 
  function w3AddClass(element, name) { 
   var i, arr1, arr2; 
   arr1 = element.className.split(" "); 
   arr2 = name.split(" "); 
   for (i = 0; i -1) { 
      arr1.splice(arr1.indexOf(arr2[i]), 1); } } 
   element.className = arr1.join(" "); } // Add active class to the current control button (highlight it) 
   var btnContainer = document.getElementById("myBtnContainer"); 
   var btns = btnContainer.getElementsByClassName("btn"); 
   for (var i = 0; i
...