如何通过javascript获得引导网格行或网格容器宽度(以像素为单位)

Question

如何通过javascript获得引导网格行或网格容器宽度(以像素为单位)。

我使用aurelia作为javascript，但是代码可以是标准的js (请不要使用jquery)。

我试图在引导网站上找到这个，但我仍然感到困惑，因为宽度有几个维度: col-xs，colmd.但实际上，我们只使用了4个维度: col-3、col-6、col-9、col-12，而且没有更多，所以基本上我需要获得完整的宽度，以便再次将像素转换为col，以匹配HTML元素的调整大小。

Answer 1

使用document.querySelectorAll(“html查询”).offsetWidth获取元素。

此命令将返回元素宽度(以像素为单位)，包括填充。

我在jsFiddle中做了一个例子：

https://jsfiddle.net/dgf0okrj/

document.querySelectorAll("your html query")[0].offsetWidth

打开你的控制台并运行它。

Answer 2

可以更新css中引导行或容器或列的宽度和最大宽度：

.row{
 max-width: 200px !important;
 width: 200px !important;
}

或者，您也可以使用%来更新宽度，但请记住始终更新css中的最大宽度。