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

Question

如何通过 javascript 获取引导网格行或网格容器宽度（以像素为单位）。

我将 aurelia 用于 javascript 但代码可以是标准 js（请不要使用 jquery）。

我试图在 bootstrap 网站上找到这个，但我仍然感到困惑，因为宽度有几个维度：col-xs、colmd ......但实际上，我们只是使用 4 个维度：col-3、col-6、 col-9，col-12，仅此而已，所以基本上我需要获得完整的宽度才能将像素再次转换为 col-x 以匹配从 HTML 元素调整大小。

Answer 1

使用 document.querySelectorAll("your html 查询")[0].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 中的最大宽度。

Answer 3

要获取网格或行或任何元素的宽度（以像素为单位），您可以执行以下操作：

const pixels = document.querySelector('.grid').clientWidth;