获取引导网格中列的宽度答案

【问题标题】：Get width of a column in bootstrap grid获取引导网格中列的宽度
【发布时间】：2018-06-21 09:25:21
【问题描述】：

如何获取引导网格中列的宽度？我无法让代码返回像像素数这样的值。另外，我希望在调整浏览器大小时该数字会发生变化。

var width = document.getElementById("answer");
var unit = document.getElementsByClassName("col-3");

var x = unit.width;

width.textContent = x;

.col-3 {
  height:100px;
}

#a {
  background: red;
}

#b {
  background:blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="a">Width:<span id="answer">0</span></div>
    <div class="col-3" id="b"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

【问题讨论】：

标签： javascript bootstrap-4

【解决方案1】：

您需要在行中获取第一个子 col-3，因为第一个子宽度后的 col-3：0

$(document).ready(function(){

  var unit = $(".col-3:first-child").width();
  var width = $("#answer").text(unit);
  
});

.col-3 {
  height:100px;
}

#a {
  background: red;
}

#b {
  background:blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="a">Width:<span id="answer">0</span></div>
    <div class="col-3" id="b"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

【讨论】：

为什么 col-3 在 first-child width:0 之后？
使用 document.getElementsByClassName 时返回对象，无法获取宽度，使用 jquery 获取宽度元素