Объединить строки бутстрапа при изменении размера

Question

Есть ли простой способ объединить две строки в bootstrap с jquery, основанный на действиях пользователя?

В моем приложении пользователь перемещает панель слайдов, и я хочу, чтобы сетка 4x4 превратилась в сетку 3x3. Понимает, как я сортирую свои столбцы.

Я не могу понять, как правильно перенастроить строки. Я надеюсь там что-то там, я пропустил, что делает это для меня.

$slider.slider({ 
      max: 80, 
      step: 20, 
      min:0, 
      value:0, 
      orientation: 'horizontal', 
      range: 'min', 
      slide: function(event, ui) { 
       if(ui.value < 20){ 
        $(".cellsize").removeClass("col-md-4"); 
        $(".cellsize").addClass("col-md-3"); 
        $(".cellbutton").removeClass("btn-lg").addClass("btn-sm"); 

       }else if(ui.value >= 20 && ui.value < 40){ 

        $(".cellbutton").removeClass("btn-sm").addClass("btn-md").removeClass("btn-lg"); 
        $(".cellsize").removeClass("col-md-3"); 
        $(".cellsize").addClass("col-md-4"); 
        $(".cellsize").removeClass("col-md-5"); 
       }else if(ui.value >= 40 && ui.value < 60){ 
        $(".rowcell2").addClass("row") 
        $(".rowcell").removeClass("row") 
        $(".cellbutton").removeClass("btn-md").addClass("btn-lg").removeClass("btn-block"); 
        $(".cellsize").removeClass("col-md-4"); 
        $(".cellsize").addClass("col-md-5"); 
        $(".cellsize").removeClass("col-md-6"); 
       }else if (ui.value >=60 && ui.value < 80){ 
        $(".cellbutton").removeClass("btn-lg").addClass("btn-block"); 
        $(".cellsize").removeClass("col-md-5"); 
        $(".cellsize").addClass("col-md-6") 
        $(".cellsize").removeClass("col-md-12"); 
       }else{ 
        $(".cellsize").addClass("col-md-12") 
        $(".cellsize").removeClass("col-md-6"); 

       } 
       } 
     }).addSliderSegments(); 

До сих пор мои попытки заключались в том, чтобы попытаться удалить строки в зависимости от текущего размера столбцов.

Обновление С помощью html, я использую язык шаблонов django. Я могу опубликовать его html, если необходимо.

  <div class = "col-md-12"> 
          {% for card in cards %} 
           {%if forloop.counter0|divisibleby:4%} 
             {%if forloop.counter0 != 0%} 
              </div> 
             {%endif%} 
             <div class = "row"> 
           {% endif %} 
           <div class = " cellsize col-md-3 "> 
            <div id = "cell{{card.id}}"> 
            <ul class="list-group " id = "cellwidth{{card.id}}"> 
             <!--- ommited ---> 

            </ul> 
            </div> 
           </div>         
          {%endfor%} 

`

Answer 1

К сожалению, нет простого способа сделать это, используя Bootstrap. Вам нужно будет написать собственную логику самостоятельно, что действительно не стоит того, учитывая, что есть несколько библиотек, которые уже делают это очень хорошо. Вы должны проверить что-то вроде Isotope или Masonry, оба из которых я использовал в прошлом, и будут делать именно то, что вы хотите, только с несколькими строками JavaScript.

Answer 2

Если цель состоит в том, чтобы иметь «полные» строки при каждом повторном размере на основе загрузочного класса, который вы добавляете и удаляете, возможно, вам действительно не нужны все строки, которые будут обернуты в строку начальной загрузки (<div class="row"> isn «т обязательно должны иметь ряд визуально)

Вот codepen, которая иллюстрирует это поведение при изменении размеров экрана (воспользовавшись бутстрап сетки и медиа-запросов):. http://codepen.io/anon/pen/KVQbKm

Это звучит, как вы хотите если пользователь установил количество столбцов, и, хотя это не поведение по умолчанию для начальной загрузки, похоже, что вы в порядке с добавлением/удалением классов для этого, и у вас есть правильный идентификатор ea, что изменение с col-md-3 на col-md-4 действительно изменит элементы от 4 до 3 в поперечнике. Так может случиться так, что то, что у вас будет, будет работать нормально, если вы просто обернете все элементы в одной строке начальной загрузки и позвольте ширине элементов определять, как много поместится в визуальной строке, так как они естественным образом будут течь, когда пространство не будет доступный.

Не видя HTML, трудно сказать, будет ли ваш jQuery работать точно так, как есть, но если он не хочет добавлять собственный код, а также любое объяснение того, что не работает, - с удовольствием взглянуть.