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

Posted 2023-03-25

【中文标题】bootstrap 网格中的动态列排列（bootstrap+vanilla js）

【英文标题】：Dynamic column arrangement in bootstrap grid (bootstrap+vanilla js)

【发布时间】：2021-11-06 06:34:33

【问题描述】：

我正在创建一个网格（因此在单元格中有行和列以及按钮）和一个应该改变列数的滑块。

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

在引导程序中是否有另一种方法，或者我是否需要从头开始创建网格布局并每次都更改列布局？

【问题讨论】：

这取决于您对引导程序或纯 CSS/JS 的掌握程度。您的问题含糊不清，答案只能以某种方式基于意见。你的背景、结构是什么？到目前为止你尝试过什么？

我有一个在网格容器中添加按钮的按钮，它们都有一个特定大小的列类（col-*）。我的第一种方法是检测容器中的所有列标签并通过弹出一个替换旧的新标签来更改类，但这似乎不可行（因为我必须通过每个按钮），第二种方法是重绘整个网格并在达到列数之后放置行，这在低端设备上似乎也很费力。

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案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++;
   

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