bootstrap 网格中的动态列排列（bootstrap+vanilla js）

Question

我正在创建一个网格（单元格中包含带有按钮的行和列的东西）和一个应该改变列数的滑块。

行数实际上是无限的，并且由于 bootstrap 中的网格布局是使用 flexbox 实现的，我应该交换列类或在每个 onchange 事件中重绘所有内容。

在 bootstrap 中还有其他方法吗？还是我需要从头开始创建网格布局并每次都更改列布局？

Answer 1

我设法通过在行内添加元素计数器来做到这一点，每当我达到所需的元素编号时，我都会追加一个新行并开始向最后一行添加元素

喜欢

   if(indexofrow%element.getColNumber()==0){
            indexofrow++;
            document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
            drawSingleButton(i,element,arrayOfLayers);
        }else{
            drawSingleButton(i,element,arrayOfLayers);
            indexofrow++;
   }

这可能是一个廉价的解决方法，但对我来说它有效

bootstrap 网格中的动态列排列（bootstrap+vanilla js）

Dynamic column arrangement in bootstrap grid (bootstrap+vanilla js)

javascript

css

layout

dynamic

twitter-bootstrap