Question

如何获取引导网格中列的宽度？我无法获取返回px数之类的值的代码。另外，我希望当我调整浏览器大小时，数字会改变。

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>

Answer 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>

获取引导网格中列的宽度

1 个答案: