javascript - 在调整大小时合并 Bootstrap 行

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 就可以完全按照您的要求进行操作。